[js开源组件开发]图片懒加载lazyload
2015-05-15 09:48
701 查看
图片懒加载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指向当前对象
相关文章推荐
- [js开源组件开发]loading加载效果
- [js开源组件开发]js轮播图片支持手机滑动切换
- [js开源组件开发]图片放大镜
- 安卓开发笔记——关于开源组件PullToRefresh实现下拉刷新和上拉加载(一分钟搞定,超级简单)
- Asp.net 组件开发中web资源文件(图片、js)的调用问题
- Universal-Image-Loader,android-Volley,Picasso、Fresco和Glide五大Android开源组件加载网络图片比较
- Universal-Image-Loader,android-Volley,Picasso、Fresco和Glide五大Android开源组件加载网络图片的优缺点比较
- Android开发-高级网络组件(2)使用Volley加载网络图片-AndroidStudio
- Universal-Image-Loader,android-Volley,Picasso、Fresco和Glide五大Android开源组件加载网络图片的优缺点比较
- [js开源组件开发]js多选日期控件
- Universal-Image-Loader,android-Volley,Picasso、Fresco和Glide五大Android开源组件加载网络图片比较
- [js开源组件开发]html5标签audio的样式更改
- [js开源组件开发]tip提示组件
- Universal-Image-Loader,android-Volley,Picasso、Fresco和Glide五大Android开源组件加载网络图片的优缺点比较
- [置顶] Universal-Image-Loader,android-Volley,Picasso、Fresco和Glide五大Android开源组件加载网络图片的优缺点比较
- Cocos2d-js 开发记录:图片数据资源等的异步加载
- [js开源组件开发]ajax分页组件
- Universal-Image-Loader,android-Volley,Picasso、Fresco和Glide五大Android开源组件加载网络图片的优缺点比较
- 关注电子商务网站开发-《简单易用的JQUERY插件--图片延时加载插件(lazyload)》
- [js开源组件开发]js手机联动选择地区仿ios 开源git