JS實(shí)例網(wǎng)頁上圖片延遲加載的JS代碼

1、大家如果使用firebug去查看的話就會(huì)發(fā)現(xiàn)，當(dāng)你滾動(dòng)到相應(yīng)的行時(shí)，當(dāng)前行的圖片才即時(shí)加載的，這樣子的話頁面在打開只加可視區(qū)域的圖片，而其它隱藏的圖片則不加載，一定程序上加快了頁面加載的速度，對于比較長的頁面來說，這個(gè)方案是比較好的。實(shí)現(xiàn)原理把所有需要延時(shí)加載的圖片改成如下的格式：vimglazy_src=圖片路徑border=0/然后在頁面加載時(shí)，把所有使用了lazy_src的圖片都保存到數(shù)組里，然后在滾動(dòng)時(shí)計(jì)算可視區(qū)域的top,然后把延時(shí)加載的圖片中top小于當(dāng)前可視區(qū)域（即圖片出現(xiàn)在可視區(qū)域內(nèi)）的圖片的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=;/從所有相關(guān)元素中找出需要延時(shí)加載的元素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)();使用方法：把頁面上需要延時(shí)加載的圖片src改成為lazy_src,然后把上面的js放到body最后面，然后調(diào)用：lazyLoad.init();調(diào)試的方法可以使用firebug來查看一時(shí)圖片是否是延時(shí)加載。另外：如果你的頁面上存在有內(nèi)容切換的欄目的話,可能在切換時(shí)切換的內(nèi)容里的圖片可能會(huì)不顯示,處理的方法是在內(nèi)容時(shí)單獨(dú)圖片加載處理,如：/切換內(nèi)容的代碼.chlid.find(imginit_src).each(function()$(this).attr(src,$(this).attr(init_src);$(this).removeAttr(init_src););本文轉(zhuǎn)摘自IT學(xué)習(xí)者一file:/E:/技術(shù)/J