js图片懒加载的第二种方式

小鱼儿 2022-01-31 12:39 208阅读 0赞

## 这种方式是图片按照顺序一张一张的加载直到所有图片都加载完成 ##

#### 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,{ }))

这种方式适合图片较大的时候，一张一张的将图片全部加载完成省去等待时间