实现图片预加载的三大方法及优缺点分析


Posted in Javascript onNovember 19, 2014

预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度。这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速、无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验。本文将分享三个不同的预加载技术,来增强网站的性能与可用性。

方法一:用CSS和JavaScript实现预加载

实现预加载图片有很多方法,包括使用CSS、JavaScript及两者的各种组合。这些技术可根据不同设计场景设计出相应的解决方案,十分高效。
单纯使用CSS,可容易、高效地预加载图片,代码如下:

#preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }    

#preload-02 { background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px; }    

#preload-03 { background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px; } 

将这三个ID选择器应用到(X)HTML元素中,我们便可通过CSS的background属性将图片预加载到屏幕外的背景上。只要这些图片的路径保持不变,当它们在Web页面的其他地方被调用时,浏览器就会在渲染过程中使用预加载(缓存)的图片。简单、高效,不需要任何JavaScript。
该方法虽然高效,但仍有改进余地。使用该法加载的图片会同页面的其他内容一起加载,增加了页面的整体加载时间。为了解决这个问题,我们增加了一些JavaScript代码,来推迟预加载的时间,直到页面加载完毕。代码如下:

// better image preloading @ <A href="http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/">http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/</A> function preloader() {    

    if (document.getElementById) {    

        document.getElementById("preload-01").style.background = "url(http://domain.tld/image-01.png) no-repeat -9999px -9999px";    

        document.getElementById("preload-02").style.background = "url(http://domain.tld/image-02.png) no-repeat -9999px -9999px";    

        document.getElementById("preload-03").style.background = "url(http://domain.tld/image-03.png) no-repeat -9999px -9999px";    

    }    

}    

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); 

在该脚本的第一部分,我们获取使用类选择器的元素,并为其设置了background属性,以预加载不同的图片。
该脚本的第二部分,我们使用addLoadEvent()函数来延迟preloader()函数的加载时间,直到页面加载完毕。
如果JavaScript无法在用户的浏览器中正常运行,会发生什么?很简单,图片不会被预加载,当页面调用图片时,正常显示即可。

方法二:仅使用JavaScript实现预加载

上述方法有时确实很高效,但我们逐渐发现它在实际实现过程中会耗费太多时间。相反,我更喜欢使用纯JavaScript来实现图片的预加载。下面将提供两种这样的预加载方法,它们可以很漂亮地工作于所有现代浏览器之上。

JavaScript代码段1
只需简单编辑、加载所需要图片的路径与名称即可,很容易实现:

<div class="hidden">    

    <script type="text/javascript">    

        <!--//--><![CDATA[//><!--             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> 

该方法尤其适用预加载大量的图片。我的画廊网站使用该技术,预加载图片数量达50多张。将该脚本应用到登录页面,只要用户输入登录帐号,大部分画廊图片将被预加载。

JavaScript代码段2
该方法与上面的方法类似,也可以预加载任意数量的图片。将下面的脚本添加入任何Web页中,根据程序指令进行编辑即可。

<div class="hidden"> 

    <script type="text/javascript"> 

        <!--//--><![CDATA[//><!--             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实现预加载

上面所给出的方法似乎不够酷,那现在来看一个使用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。

好了,本文就先介绍到这里,三种实现图片预加载技术的方法大家都已经了解了吧,具体哪个更高效,我想小伙伴们也都看出来了,那就应用到自己的项目中吧。

Javascript 相关文章推荐
仅Firefox中链接A无法实现模拟点击以触发其默认行为
Jul 31 Javascript
Jquery创建一个层当鼠标移动到层上面不消失效果
Dec 12 Javascript
推荐一个自己用的封装好的javascript插件
Jan 29 Javascript
javascript轻量级库createjs使用Easel实现拖拽效果
Feb 19 Javascript
利用Node.JS实现邮件发送功能
Oct 21 Javascript
JS使用正则实现去掉字符串左右空格的方法
Dec 27 Javascript
JS实现的数字格式化功能示例
Feb 10 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
Sep 04 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
Oct 25 Javascript
vue中vee validate表单校验的几种基本使用
Jun 25 Javascript
vue-router 源码之实现一个简单的 vue-router
Jul 02 Javascript
详解vue中axios请求的封装
Apr 08 Javascript
jQuery Ajax()方法使用指南
Nov 19 #Javascript
javascript匿名函数实例分析
Nov 18 #Javascript
Linux下使用jq友好的打印JSON技巧分享
Nov 18 #Javascript
删除Javascript Object中间的key
Nov 18 #Javascript
如何在MVC应用程序中使用Jquery
Nov 17 #Javascript
Jquery实现仿腾讯微博发表广播
Nov 17 #Javascript
JavaScript数组常用操作技巧汇总
Nov 17 #Javascript
You might like
在同一窗体中使用PHP来处理多个提交任务
2006/10/09 PHP
php给一组指定关键词添加span标签的方法
2015/03/31 PHP
PHP赋值的内部是如何跑的详解
2019/01/13 PHP
js indexOf()定义和用法
2012/10/21 Javascript
JQuery中如何传递参数如click(),change()等具体实现
2013/04/28 Javascript
jquery图片不完全按比例自动缩小的简单代码
2013/07/29 Javascript
$(&quot;&quot;).click与onclick的区别示例介绍
2014/09/25 Javascript
简介JavaScript中Boolean.toSource()方法的使用
2015/06/05 Javascript
三分钟带你玩转jQuery.noConflict()
2016/02/15 Javascript
js 求时间差的实现代码
2016/04/26 Javascript
Vue.js中轻松解决v-for执行出错的三个方案
2017/06/09 Javascript
AngularJS中filter的使用实例详解
2017/08/25 Javascript
vue多级复杂列表展开/折叠及全选/分组全选实现
2018/11/05 Javascript
[08:08]DOTA2-DPC中国联赛2月28日Recap集锦
2021/03/11 DOTA
python调用机器喇叭发出蜂鸣声(Beep)的方法
2015/03/23 Python
举例讲解Python程序与系统shell交互的方式
2015/04/09 Python
python实现的简单FTP上传下载文件实例
2015/06/30 Python
Python XlsxWriter模块Chart类用法实例分析
2019/03/11 Python
关于python中密码加盐的学习体会小结
2019/07/15 Python
详解python中的数据类型和控制流
2019/08/08 Python
python实现银行管理系统
2019/10/25 Python
学习Python爬虫的几点建议
2020/08/05 Python
Pytho爬虫中Requests设置请求头Headers的方法
2020/09/22 Python
Python基于Socket实现简易多人聊天室的示例代码
2020/11/29 Python
利用Python函数实现一个万历表完整示例
2021/01/23 Python
在HTML5中使用MathML数学公式的简单讲解
2016/02/19 HTML / CSS
美国男女折扣服饰百货连锁店:Stein Mart
2017/05/02 全球购物
后勤岗位职责
2013/11/26 职场文书
学生会个人自荐书范文
2014/02/12 职场文书
生日主持词
2014/03/20 职场文书
软弱涣散基层党组织整改方案
2014/10/25 职场文书
2014年计划生育协会工作总结
2014/11/14 职场文书
2015年幼儿园新年寄语
2014/12/08 职场文书
pytorch损失反向传播后梯度为none的问题
2021/05/12 Python
element多个表单校验的实现
2021/05/27 Javascript
解决Springboot PostMapping无法获取数据的问题
2022/05/06 Java/Android