属性和方法

王朝学院·作者佚名  2016-05-22
窄屏简体版  字體: 小  |  中  |  大  |  超大  

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

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

使用方法案例:<img data-src="http://ott.wansecheng.com/weidian/wdgoods/1429250625186.jpg" alt="">$('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指向当前对象

 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
© 2005- 王朝網路 版權所有 導航