懒加载

安装

npm install lazy-load-img --save

优势:

1.原生js开发,不依赖任何框架或库
2.支持将各种宽高不一致的图片,自动剪切成默认图片的宽高
比如说你的默认图片是一张正方形的图片,则各种宽度高度不一样的图片,自动剪切成正方形。
完美解决移动端开发中,用户上传图片宽高不一致而导致的图片变形的问题。

3.简洁的API,让你分分钟入门!!!


快速入门:

var lazyloadImg = new LazyloadImg({
el: '#ul [data-src]', //匹配元素
top: 50, //元素在顶部伸出长度触发加载机制
right: 50, //元素在右边伸出长度触发加载机制
bottom: 50, //元素在底部伸出长度触发加载机制
left: 50, //元素在左边伸出长度触发加载机制
qriginal: false, // true,自动将图片剪切成默认图片的宽高;false显示图片真实宽高
before: function (el) { //图片开始加载前执行的回调方法,传入一个参数,即元素本身
},
load: function(el) { //图片加载成功后执行的回调方法,传入一个参数,即元素本身
el.style.cssText += '-webkit-animation: fadeIn 01s ease 0.2s 1 both;animation: fadeIn 1s ease 0.2s 1 both;';
},
error: function(el) { //图片加载失败后执行的回调方法,传入一个参数,即元素本身

    }
});
//结束图片懒加载事件监听:lazyloadImg.end();
//开始图片懒加载事件监听:lazyloadImg.start();

api

lazyloadImg.start(); //开始启动程序,会绑定相关的事件,并且来检测符合加载条件的元素
lazyloadImg.end(); //结束程序,会解除绑定所有的相关事件,释放内存
lazyloadImg.eachDOM(); //检测匹配的元素,符合条件的,会立即加载
lazyloadImg.testMeet(el); //检测元素是否在可视区,传入一个参数,即元素对象
lazyloadImg.loadImg(el); //加载图片,传入一个参数,即img元素对象
lazyloadImg.getTransparent(src, width, height); //生成一张透明的图片,参数分别是:图片地址,宽度,高度    

Dem链接

http://lzxb.github.io/lazy-load-img/
demo2 将各种宽高不一的图标剪切成默认图片的尺寸大小
http://lzxb.github.io/lazy-load-img/index2.html

欢迎您来访https://leezhang521.github.io

推荐阅读更多精彩内容

  • 人生就像一列开往坟墓的列车,路途上会有很多站,很难有人至始至终陪你走完全程,当陪你的人要下车时,即便不舍,也要心存...
    sunny519111阅读 270评论 0 0
  • 之前对预加载的实现方案做了介绍,这一篇文章主要是我对图片的懒加载的实现的一个总结。主要包括: 视区检测 图片懒加载...
    small_a阅读 1,848评论 3 24
  • 初始加载资源过多 问题起源于我们的一个页面,下面是这个页面的截图和初次请求的瀑布图。 初始加载的时候,一共请求了1...
    binggg_booker阅读 3,554评论 0 15
  • 1、懒加载1.什么是懒加载?懒加载也就是延迟加载。当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替...
    Gaochengxin阅读 77评论 1 2
  • private 权限扩大 在 Swift 4 中,extension 可以读取 private 变量了。 Swif...
    BYQiu阅读 205评论 0 1