js实现网页图片延时加载 提高网页打开速度

提高网页加载速度的方法有很多。使用jquery.lazyload.js实现图片的异步延迟加载，对于页面图片较多的网站来说，将是提高网页打开速度的好方法。在代码网站栏目页面列表左侧，在PC端预览时可以看到一个文章缩略图显示模块，会在一定程度上延长网页加载时间。本文采用异步延时加载图片的方法来提高该网站的页面加载速度。

图片的异步加载意味着你不必一次加载显示页面上的所有图片，只有当用户将滚动条滑动到某个位置时，对应位置的图片才会被加载显示，可以提高网页的加载速度，进一步提升用户体验。

很多技术文章都附有很多图片。如果在打开网页时需要一次加载所有图片，用户肯定要等很长时间。这样会让用户体验很差，不需要一次加载页面上的所有图片。异步延迟加载图片是网页设计中最合理、最合适的方式。

我们使用jQuery.lazyload.js实现图片的异步延迟加载。记得先加载jquery。

1.导入JS插件：

脚本类型=' text/JavaScript ' src=' http : jquery . js '/script script type=' text/JAVAScript ' src=' http : jquery . lazy load . js '/script 2，将JAVAScript代码插入页面：

$(文档)。ready (function ($) {$ ('img '))。lazy load({ placeholder : ' grey . gif '，//加载图片效果前的占位图片3360 '淡入'//加载图片使用的效果(淡入)})；});通过以上两个步骤，可以简单实现网页图片的异步延时加载。

我给大家详细介绍一下：有时候我们看到一些大型网站。如果页面上有很多图片，当您滚动到相应的行时，当前行中的图片会立即加载。这样，当页面打开时，只会添加可见区域的图片，而不会加载其他隐藏的图片，加快了页面在某个程序中的加载速度。对于较长的页面，这个方案更好。

推荐：使用jquery图像延迟加载插件jquery.lazyload实现图像延迟。

实施原则：

将所有需要延迟的图片更改为以下格式：

Img lazy_src='http:图片路径' border='0'/然后在加载页面时，使用lazy_src将所有图片保存在数组中，然后在滚动时计算可视区域的顶部，然后将顶部小于当前可视区域的图片的src值(即图片出现在可视区域中)替换为lazy_src(加载图片):

JS代码：

惰性加载=(function(){ var map _ element={ }；var element _ obj=[]；var下载_计数=0;var last _ offset=-1；var doc _ body var doc _ element var lazy _ load _ tag函数initVar(tags){ doc _ body=document。身体；doc _ element=文档。兼容模式==' back compat '？doc _ body :文档。文档元素；lazy_load_tag=tags || ['img '，' iframe ']；};函数initElementMap(){ var all _ element=[]；//从所有相关元素中找出需要延时加载的元素for (var i=0，len=lazy _ load _ tag.length我透镜；I){ var El=文档。getelementsbytagname(lazy _ load _ tag[I])；for (var j=0，len 2=El . len jj len 2j){ if(类型为(El[j])=' object ' El[j]).getAttribute(' lazy _ src '){ element _ obj。push(all _ element[key])；} } } for (var i=0，len=element _ obj.length我透镜；I){ var o _ img=element _ obj[I]；var t _ index=GetaBsolutetop(o _ img)；//得到图片相对文件的距上距离if(map _ element[t _ index]){ map _ element[t _ index].推(我)；} else { //按距上距离保存一个队列var t _ array=[]；t _ array[0]=I；map _ element[t _ index]=t _ array；下载计数；//需要延时加载的图片数量} } };函数initdownloaddlisten(){ if(！下载计数)返回；var偏移量=(窗口消息事件！document.getBoxObjectFor)？doc _ body。滚动顶部： doc _ element。滚动顶部；//可视化区域的offtset=文档的高var visio _ offset=offset doc _ element。客户身高；if(last _ offset==visio _ offset){ setTimeout(initdownloadsilen，200)；返回；} last _ offset=visio _ offset var visio _ height=doc _ element。客户身高；var img _ show _ height=visio _ height offset；for(map _ element中的定义变量键){ if (img_show_height键){ var t _ o=map _ element[key]；var img _ VL=t _ o . length for(var l=0；l img _ vll ) { element_obj[t_o[l]].src=element_obj[t_o[l]].getAttribute(' lazy _ src ')；}删除map _ element[key]；下载计数-;} } setTimeout(initdownloadsile，200)；};函数getAbsoluteTop(元素){ if(参数。长度！=1 ||元素==null){ 0返回null} var offset top=元素。偏移顶部；while(元素=元素。offsetparent){ offsetTop=元素。offsetTop}返回offsetTop}函数初始化(标记){ initVar(标记);initElementMap()；initdownloaddlisten()；};返回{ init : init } })()；使用方法：把页面上需要延时加载的图片科学研究委员会改成为懒惰_src，然后把上面的射流研究…放到身体最后面，然后调用：LazyLoad。init()；调戏的方法可以使用萤火虫来查看一时图片是否是延时加载。另外：如果你的页面上存在有内容切换的栏目的话，可能在切换时切换的内容里的图片可能会不显示，处理的方法是在内容时单独图片加载处理，如：

///切换内容的代码… chlid.find('img[init_src]').每个（函数(){ $(此)).attr('src '，$(this).attr(' init _ src ')；$(这个)。removeAttr(' init _ src ')；});所谓图片异步加载，意思是不用一次把图片全部加载完，你可以叫它延迟加载，缓冲加载都行。

看看你有没有这种需求：某篇文章图片很多，如果在载入文章时就载入所有图片，无疑会延缓载入速度，让用户等更久，所以，我想找这样一种插件，让网页只加载浏览器视野范围内的图片，没出现在范围内的图片就暂不加载，等用户滑动滚动条时再逐步加载，lazyload就是用来实现这种效果lazyload.js。其实是jQuery的一个插件，全称是jquery.lazyload.js，看它的名字就知道它的作用了——就是偷懒载入的意思。由于它是爪哇岛描述语言写的，所以适用于所有网页，包括Wordpress。

要使用lazyload，必须先加载jQuery，jQuery依靠jQuery来达到它的效果。

以上就是本文的全部内容。希望大家能对js实现网页图片延迟加载有更深的理解。