利用js实现图片预加载，加载所需要图片的路径与名称即可，很容易实现，该方法尤其适用预加载大量的图片：

<div class="hidden">

    <script type="text/javascript">

            var images = new Array()

            function preload() {

                for (i = 0; i < preload.arguments.length; i++) {

                    images[i] = new Image()

                    images[i].src = preload.arguments[i]

                }

            }

            preload(

                "http://domain.tld/gallery/image-001.jpg",

                "http://domain.tld/gallery/image-002.jpg",

                "http://domain.tld/gallery/image-003.jpg"

            )

    </script>

</div>

　　可以预加载任意数量的图片。将下面的脚本添加入任何Web页中，根据程序指令进行编辑即可。

<div class="hidden">

    <script type="text/javascript">

            if (document.images) {

                img1 = new Image();

                img2 = new Image();

                img3 = new Image();

                img1.src = "http://domain.tld/path/to/image-001.gif";

                img2.src = "http://domain.tld/path/to/image-002.gif";

                img3.src = "http://domain.tld/path/to/image-003.gif";

            }

    </script>

</div>

　　正如所看见，每加载一个图片都需要创建一个变量，如“img1 = new Image();”，及图片源地址声明，如“img3.src = “../path/to/image-003.gif”;”。参考该模式，你可根据需要加载任意多的图片。

对该方法进行了改进。将该脚本封装入一个函数中，并使用 addLoadEvent（），延迟预加载时间，直到页面加载完毕。

function preloader() {

    if (document.images) {

        var img1 = new Image();

        var img2 = new Image();

        var img3 = new Image();

        img1.src = "http://domain.tld/path/to/image-001.gif";

        img2.src = "http://domain.tld/path/to/image-002.gif";

        img3.src = "http://domain.tld/path/to/image-003.gif";

    }

}

function addLoadEvent(func) {

    var oldonload = window.onload;

    if (typeof window.onload != 'function') {

        window.onload = func;

    } else {

        window.onload = function() {

            if (oldonload) {

                oldonload();

            }

            func();

        }

    }

}

addLoadEvent(preloader);

　　上面所给出的方法似乎不够酷，那现在来看一个使用Ajax实现图片预加载的方法。该方法利用DOM，不仅仅预加载图片，还会预加载CSS、JavaScript等相关的东西。使用Ajax，比直接使用JavaScript，优越之处在于JavaScript和CSS的加载不会影响到当前页面。该方法简洁、高效。

window.onload = function() {

    setTimeout(function() {

        // XHR to request a JS and a CSS

        var xhr = new XMLHttpRequest();

        xhr.open('GET', 'http://domain.tld/preload.js');

        xhr.send('');

        xhr = new XMLHttpRequest();

        xhr.open('GET', 'http://domain.tld/preload.css');

        xhr.send('');

        // preload image

        new Image().src = "http://domain.tld/preload.png";

    }, 1000);

};

　　

上面代码预加载了“preload.js”、“preload.css”和“preload.png”。1000毫秒的超时是为了防止脚本挂起，而导致正常页面出现功能问题。

下面，我们看看如何用JavaScript来实现该加载过程：

window.onload = function() {

    setTimeout(function() {

        // reference to <head>

        var head = document.getElementsByTagName('head')[0];

        // a new CSS

        var css = document.createElement('link');

        css.type = "text/css";

        css.rel  = "stylesheet";

        css.href = "http://domain.tld/preload.css";

        // a new JS

        var js  = document.createElement("script");

        js.type = "text/javascript";

        js.src  = "http://domain.tld/preload.js";

        // preload JS and CSS

        head.appendChild(css);

        head.appendChild(js);

        // preload image

        new Image().src = "http://domain.tld/preload.png";

    }, 1000);

};

　　这里，我们通过DOM创建三个元素来实现三个文件的预加载。正如上面提到的那样，使用Ajax，加载文件不会应用到加载页面上。从这点上看，Ajax方法优越于JavaScript。

原文: http://i.jakeyu.top/2016/11/28/图片预加载/　　作者: Jake

还可以进入个人博客：www.jishubar.cn

图片预加载和AJAX的图片预加载的更多相关文章

  1. 向上滚动或者向下滚动分页异步加载数据(Ajax + lazyload)[上拉加载组件]

    /**** desc : 分页异步获取列表数据,页面向上滚动时候加载前面页码,向下滚动时加载后面页码 ajaxdata_url ajax异步的URL 如data.php page_val_name a ...

  2. 利用CSS、JavaScript及Ajax实现图片预加载的三大方法

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  3. 利用CSS、JavaScript及Ajax实现图片预加载的三大方法(转)

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  4. 利用CSS、JavaScript及Ajax实现图片预加载的三大方法及优缺点分析

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  5. 转载：用Jquery实现的图片预加载技术，可以实现有序加载和无序加载！

    一.背景 我们在做页面的时候,从用户体验的角度出发,肯定是希望用户以最快的速度看到完整的页面信息,但在实际情况中经常会遇到些问题. 比如受网速影响,页面加载素材的时间比较长,页面会出现短时间的错乱或者 ...

  6. ajax读取图片后排列问题（先加载完图片再排列）

    网上找了个瀑布流的图片排列插件.从数据库读取图片路径后显示时出现了位置重叠问题. $.ajax({ type: "POST", url: "index.aspx" ...

  7. js原生图片懒加载 或 js原生图片预加载，html标签自定义属性

    使用原声js来实现图片预加载,或图片懒加载,小伙伴们可以根据项目需要来结合vue或者是react来进行修改. 一.什么是图片懒加载或什么是图片预加载 当访问一个页面的时候,先把img元素或是其他元素的 ...

  8. 图片懒加载、ajax异步调用数据、lazyload插件的使用

    关于这个效果还是很简单的,样式部分我就不多说了,我就简单的写了一下布局, 这是css样式 我们先说一下实现的原理. 我们都知道在于图片的引入,我们都是用src来引入图片地址.从而实现图片的显示.那我们 ...

  9. html5 ajax多图片可预览上传图片

    最近不是特别忙,我就利用html5写了个上传图片(或其他文件)的页面,主要利用是html5的file api,此页面比较简陋,没做样式的优化,包含上传图片预览,多图片上传,上传进度条(利用html5的 ...

随机推荐

  1. RequireJS基础（三）

    这篇来写一个具有依赖的事件模块event. event提供三个方法bind.unbind.trigger来管理DOM元素事件. event依赖于cache模块,cache模块类似于jQuery的$.d ...

  2. diamond专题（一）– 简介和快速使用

     (转自 http://blog.csdn.net/zh_winer/article/details/50395024) 一.概况 diamond是淘宝内部使用的一个管理持久配置的系统,它的特点是简单 ...

  3. CSS属性(根据继承性分为两类)

    一.可继承属性 1>所有标签可继承: visibility:行高 cursor: 2>内联标签可继承: line-height:行高 color:文字颜色 font-family:文字字体 ...

  4. Linux驱动学习之常用的模块操作命令

    1.常用的模块操作命令 (1)lsmod(list module,将模块列表显示),功能是打印出当前内核中已经安装的模块列表 (2)insmod(install module,安装模块),功能是向当前 ...

  5. libcurl教程

    名称 libcurl 的编程教程 目标 本文档介绍使用libcurl编程的一般原则和一些基本方法.本文主要是介绍 c 语言的调用接口,同时也可能很好的适用于其他类 c 语言的接口. 跨平台的可移植代码 ...

  6. 搭建MySQL MHA高可用

    本文内容参考:http://www.ttlsa.com/mysql/step-one-by-one-deploy-mysql-mha-cluster/ MySQL MHA 高可用集群 环境: Linu ...

  7. 微信企业号-JS-SDK图像接口

    使用JS-SDK需要进行四步  主要是步骤二和步骤三,步骤二需要配置,步骤三具体使用相关接口,这里以使用图像接口为例 php页面代码主要用来完成步骤二,也就是配置接口 public function ...

  8. sublime text3的安装与汉化

    sublime text3 3126 64位的下载地址: https://download.sublimetext.com/Sublime%20Text%20Build%203126%20x64%20 ...

  9. POJ3694 Network（连通图+LCA）

    题目链接:http://poj.org/problem?id=3694 题目大意:给定一个图,每次添加一条边(可能有重边).输出每次添加后桥的 数目.由于添加边的次数比较多,添加一次Tarjin一次明 ...

  10. Volley简单封装

    public interface IRequest { /** * 获取头部信息 * * @return */ public Map<String, String> getHeaderMa ...