JS实例网页上图片延迟加载的JS代码

1、大家如果使用firebug去查看的话就会发现，当你滚动到相应的行时，当前行的图片才即时加载的，这样子的话页面在打开只加可视区域的图片，而其它隐藏的图片则不加载，一定程序上加快了页面加载的速度，对于比较长的页面来说，这个方案是比较好的。实现原理把所有需要延时加载的图片改成如下的格式：vimglazy_src=图片路径border=0/然后在页面加载时，把所有使用了lazy_src的图片都保存到数组里，然后在滚动时计算可视区域的top,然后把延时加载的图片中top小于当前可视区域（即图片出现在可视区域内）的图片的src的值用lazy_src的来替换（加载图片）代码lazyLoad=(functio

2、n()varmap_element=;varelement_obj=;vardownload_count=0;varlast_offset=-1;vardoc_body;vardoc_element;varlazy_load_tag;functioninitVar(tags)BackCompat?doc_body:doc_body=document.body;BackCompat?doc_body:doc_element=patModedocument.documentElement;lazy_load_tag=tags|img,iframe;functioninitElementMap()v

3、arall_element=;/从所有相关元素中找出需要延时加载的元素for(vari=0,len=lazy_load_tag.length;ilen;i+)varel=document.getElementsByTagName(lazy_load_tagi);for(varj=0,len2=el.length;jlen2;j+)if(typeof(elj)=object&elj.getAttribute(lazy_src)element_obj.push(all_elementkey);for(vari=0,len=element_obj.length;ikey)vart_o=map_ele

4、mentkey;varimg_vl=t_o.length;for(varl=0;limg_vl;l+)element_objt_ol.src=element_objt_ol.getAttribute(lazy_src);deletemap_elementkey;download_count-;setTimeout(initDownloadListen,200);functiongetAbsoluteTop(element)if(arguments.length!=1|element=null)returnnull;varoffsetTop=element.offsetTop;while(ele

5、ment=element.offsetParent)offsetTop+=element.offsetTop;returnoffsetTop;functioninit(tags)initVar(tags);initElementMap();initDownloadListen();returninit:init)();使用方法：把页面上需要延时加载的图片src改成为lazy_src,然后把上面的js放到body最后面，然后调用：lazyLoad.init();调试的方法可以使用firebug来查看一时图片是否是延时加载。另外：如果你的页面上存在有内容切换的栏目的话,可能在切换时切换的内容里的图片可能会不显示,处理的方法是在内容时单独图片加载处理,如：/切换内容的代码.chlid.find(imginit_src).each(function()$(this).attr(src,$(this).attr(init_src);$(this).removeAttr(init_src););本文转摘自IT学习者一file:/E:/技术/J