利用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. IIS发布项目 遇到的error

    HTTP 错误 403.14 - Forbidden Web 服务器被配置为不列出此目录的内容. 重新注册一下.net framework试试,当然这一步骤也可以排在第一位. 32位的Windows: ...

  2. 将Linux文件清空的几种方法

    1.使用重定向的方法 [root@centos7 ~]# du -h test.txt .0K test.txt [root@centos7 ~]# > test.txt [root@cento ...

  3. Endless Sky源码学习笔记-4

    事件处理: 事件包括:debug模式切换.切换到登陆窗口.退出.窗口大小变化.全屏切换和游戏中的鼠标键盘输入.处理方式分为两类,前几个为简单的if处理,最后一个涉及到游戏中的控制和交互,且事件由每一个 ...

  4. (转)tar.xz文件如何解压

    XZ压缩最新压缩率之王 xz这个压缩可能很多都很陌生,不过您可知道xz是绝大数Linux默认就带的一个压缩工具. 之前xz使用一直很少,所以几乎没有什么提起. 我是在下载phpmyadmin的时候看到 ...

  5. SQL 分页

    sql = "SELECT TOP 10000 * " + " FROM(SELECT ROW_NUMBER() OVER(ORDER BY DataArticleID) ...

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

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

  7. jquery验证

    首先要引用js库 <script src="js/jquery-1.7.2.min.js"></script> jquery验证方式 function ch ...

  8. Coursera Machine Learning : Regression 多元回归

    多元回归 回顾一下简单线性回归:一个特征,两个相关系数 实际的应用要比这种情况复杂的多,比如 1.房价和房屋面积并不只是简单的线性关系. 2.影响房价的因素有很多,不仅仅是房屋面积,还包括很多其他因素 ...

  9. css之absolute绝对定位(技巧篇)

    无依赖的绝对定位 margin,text-align与绝对定位的巧妙用法 例子1:实现左右上角的图标覆盖,如图,

  10. git 调用 Beyond Compare

    转载自  http://www.jackness.org/2015/03/31/git-%E8%B0%83%E7%94%A8-%E7%AC%AC%E4%B8%89%E6%96%B9%E5%AF%B9% ...