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

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

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图片懒加载的第二种方式相关推荐

实现图片懒加载的5种方式
目录 1.懒加载介绍 2.实现懒加载技术的方案 3.具体实现代码 1.懒加载介绍当页面需要展示大量图片时,如果一次性渲染所有图片,会向服务器发出大量请求,导致服务器响应慢,出现页面卡顿或崩溃等问题. ...
实现图片预加载的几种方式
感觉自己好久没有写博客了,可能自己变懒了.不知道为什么最近有点迷茫,不知道是该去学一下新东西还是该去看一下具有深度的东西.新的技术需要关注,但是我要去研究一下jquery的源码,这个东西很早就想去看, ...
vue项目实现路由按需加载(路由懒加载)的3种方式
vue项目实现路由按需加载(路由懒加载)的3种方式 1.vue异步组件 2.es提案的import() 3.webpack的require,ensur *1.vue异步组件技术 ==== 异步加载 v ...
js 图片懒加载最好的方法
图片懒加载多种方法第一种是循环遍历img属性,判断每一个img离顶部的高度减去屏幕的高度是否大于0,小于0的话就就出现在屏幕上了,我们就更改属性显示图片,这种有弊端,因为是监听滚动条,相等于实时监 ...
[js] 图片懒加载
懒加载使用场景在一些图片量比较大的场景(电商首页,小程序首页等),如果我们打开页面时就加载所有的图片,那势必会导致页面的卡顿以及白屏,给用户不好的体验,导致用户流失. 但是我们仔细想一下,用户真的需 ...
懒加载实践--js图片懒加载及优化
一.前言为啥要对图片使用懒加载?我们首先来聊聊这个问题,对于页面来说架子啊速度影响着最大的就是图片,一张普通的图片可以达到4-5M的大小,而代码压缩也就只有几十KB.当页面图片过多的时候,页面加载速 ...
JS实现图片懒加载的几种简单方式，图片懒加载
记得以前手机端有个业务时将用户上传的的图片在用户往上滑动手机的时候呈现,由于刚开始用户数量少就没留意,直接将后台的数据拉过来渲染,当时后台也没有分页,可是后来参与用户多了起来,跳转到这个页面就渲染个几 ...
防抖与节流方案_关于图片懒加载的几种方案
作者: 山月行转发链接:https://mp.weixin.qq.com/s/rY1LbW95LR6AqF1Vcx_d1Q 懒加载,顾名思义,在当前网页,滑动页面到能看到图片的时候再加载图片故问题 ...
js图片懒加载原理、实现及节流优化
1.懒加载原理在图片没有进入可视区域时,先给的src一个默认加载的图片,这样浏览器就不会发送请求了,等到图片进入可视区域再把真实的图片路径data-src给src. 2.具体实现 1. 效果 2. ...

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

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

html

js图片懒加载的第二种方式相关推荐

最新文章

热门文章