星空网 > 软件开发 > Java

[js开源组件开发]图片懒加载lazyload

图片懒加载lazyload

前端对请求的一种优化方式,为什么叫懒加载,无从查起,反正我当初一直认为它是滚动加载的一种类型。它主要是以图片或背景在可视区域内时才显示真正的图片,减少src带来的负荷。所以建议src里放置模糊小图或正在加载中的图,不要置空为好。

 

lazy-load

图片懒加载 例子见DEMO ,它的git地址是:git

[js开源组件开发]图片懒加载lazyload

使用方法案例:

<img data-src='/images/loading.gif' data-original="http://ott.wansecheng.com/weidian/wdgoods/1429250625186.jpg" >$('img').LazyLoad({  container: window,  event:'scroll',  effect: 'show',  effectArgs: 'slow',  loadImg:'loading.gif',  load: null,  offset: 0});

  

或者

var obj = new LazyLoad();obj.init({  elements:'img',  container: window,  effect: 'show',  event:'scroll',  effectArgs: 'slow',  loadImg:'loading.gif',  load: null,  offset: 0});

 


属性和方法

elements:

dom的集合,一般为需要懒加载的img标签集合,如果是动态加载的内容,请在html加载完成之后再调用init

 

init:

初始化方法

 

container: window

触发滚动条的容器,默认为window,可不传

 

event:

容器触发事件,默认为scroll

 

effect:

触发的事件方法,默认为 show

 

effectArgs

要给effect传的参数,可不传

 

loadImg

加载等待时显示的图片地址,默认是一个1pxx1px的图

 

offset:

与图片的差值,默认0

 

load:function(img)

加载完成的回调,this指向当前对象

 




原标题:[js开源组件开发]图片懒加载lazyload

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流