利用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. 常用JS效果 需要时更新。。。

    1.手风琴效果 JS: $(function() {     var aMenuOneLi = $(".menu-one > li");     var aMenuTwo = ...

  2. web前端相关网站

    传智播客.               (有很多公开课的,而且他的百度云盘也有很多东西)               http://www.itcast.cn/(这个不是广告,爱信不信) 慕课网   ...

  3. DSP学习中遇到的几个问题（初级）

    1..c和.asm 文件分别为C语言和汇编语言的源文件. 2..cmd是存储器分配说明文件,主要功能是指定工程中的各段分配到那段存储器中,比如有片内RAM(起始地址,大小)和SDRAM等.这些要根据平 ...

  4. RegExp对象

    RegExp()构造函数带有两个字符串参数,其中第二个是可选的,如果提供第二个参数,它就指定正则表达式的修饰符.第一个函数包含正则表达式的主题部分,也就是正则表达式直接量中两条斜线之间的文本.无论是字 ...

  5. 学会Git玩转Github

    1. 了解Git和Github 1.1 什么是Git Git是一个免费.开源的版本控制软件 1.2 什么是版本控制系统 版本控制是一种记录一个或若干个文件内容变化,以便将来查阅特定版本修订情况得系统. ...

  6. python数据统计，总数，平均值等

    一般我们进行数据统计的时候要进行数据摸查,可能是摸查整体的分布情况啊.平均值,标准差,总数,各分段的人数啊.这时候用excel或者数据库统计都不方便. 我要统计的一个文件,太大了,还得分成15个文件, ...

  7. Android Studio doesn't list my android phone

    When USB debugger is openning, Android Studio doesn't list my phone, I cannot debug my app on my rea ...

  8. StaticPagedList

    估计是因为水平原因,之前看别人写的用pagedList分页,老是云里雾里的.下面把自己写的整理一下放在上面.这里的List为对应页面展示的内容.不用查询所有. Action: public Actio ...

  9. c++学习笔记01-输入输出流&&文件输入输出操作

    const int size=50等于#define size 50 字符串默认以0结尾: 一.输入输出流 cin.get()会从输入中取走一个字符: cin.peek()会从输入中检测第一个字符: ...

  10. 转-servlet 获取 post body 体用流读取为空的问题

    目前基于rest风格的很多API开始使用通过body data来传输来代替之前的key-value传输方式.在Java servlet或者springmvc中可以通过如下代码来获取并图片通过流方式传输 ...