這種方式是圖片按照順序一張一張的加載直到所有圖片都加載完成

html

同樣的要讓圖片進行懶加載，路徑引用就得用 data-src

<ul><li><img data-src="http://tle.haiguidjk.com/static/index/image/home_page/01.jpg" /></li><li><img data-src="http://tle.haiguidjk.com/static/index/image/home_page/02.jpg" /></li><li><img data-src="http://tle.haiguidjk.com/static/index/image/home_page/03.jpg" /></li><li><img data-src="http://tle.haiguidjk.com/static/index/image/home_page/04.jpg" /></li><li><img data-src="http://tle.haiguidjk.com/static/index/image/home_page/05.jpg" /></li><li><img data-src="http://tle.haiguidjk.com/static/index/image/home_page/06.jpg" /></li><li><img data-src="http://tle.haiguidjk.com/static/index/image/home_page/07.jpg" /></li></ul>引用方式<script src="/static/index/script/lazy.image.min.js"></script><script>LazyImage.init({elements: document.querySelectorAll('li img')});</script>

這是壓縮的js文件，為了方便使用，直接這么展示，使用過的使用直接創建文件把代碼復制進入就行

eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('!2(){"K G";6(!p.o.8){p.o.8=2 8(a,b){5 T,k;6(j==h){s g m("j n h B r A");}5 O=w(j);5 c=O.9>>>0;6(D a!=="2"){s g m(a+" n r a 2");}6(F.9>1){T=b}k=0;J(k<c){5 d;6(k L O){d=O[k];a.N(T,d,k,O)}k++}}}5 f={x:2(){5 a=[],7=z.X(\'4\');C(5 i=0;i<7.9;i++){6(7[i].E[\'q-3\']){a.H(7[i])}}7=h;l(a)},I:2(d,e){d.8(2(a,b){5 c=a,4=g t();4.u=2(){e(M,c,b)};4.v=2(){e(P,c,b)};4.3=c})}};2 l(a){6(a.9<=0)Q;5 b=a[0],3=b.R(\'q-3\'),4=g t();4.u=2(){b.3=3;a.S();l(a)};4.v=2(e){U.V(3)};4.3=3}W.y=f}();',60,60,'||function|src|img|var|if|img_nodes|forEach|length|||||||new|null||this||loadImg|TypeError|is|prototype|Array|data|not|throw|Image|onload|onerror|Object|init|LazyImage|document|defined|or|for|typeof|attributes|arguments|strict|push|lazy|while|use|in|true|call||false|return|getAttribute|shift||console|error|window|getElementsByTagName'.split('|'),0,{}))

這種方式適合圖片較大的時候，一張一張的將圖片全部加載完成省去等待時間

總結

以上是生活随笔為你收集整理的js图片懒加载的第二种方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。