移动端图片懒加载插件

LazyloadImg介绍

LazyloadImg 轻量级的移动端图片懒加载插件
原生js开发，不依赖任何框架或库
支持将各种宽高不一致的图片，自动剪切成默认图片的宽高。比如说你的默认图片是一张正方形的图片，则各种宽度高度不一样的图片，自动剪切成正方形。
完美解决移动端开发中，用户上传图片宽高不一致而导致的图片变形的问题。
简洁的API，让你分分钟入门！！！

快速入门

var lazyloadImg = new LazyloadImg({
    el: '#ul [data-src]', //匹配元素
    top: 50, //元素在顶部伸出长度触发加载机制
    right: 50, //元素在右边伸出长度触发加载机制
    bottom: 50, //元素在底部伸出长度触发加载机制
    left: 50, //元素在左边伸出长度触发加载机制
    qriginal: false, // true，自动将图片剪切成默认图片的宽高；false显示图片真实宽高
    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();

lazyloadimg 使后感

温馨提示

注意：必需给图片添加宽度，不然图片是不会显示出来的，这一点很重要，对于移动端的话，我们可以使用百分比来给图片添加宽度可以说是一个不错的解决方案。

珠联璧合

好东西+好东西=变成好牛的东西，lazyloadImg+animate.css 就是个好东西，没别的。为什么这么说，原因也很简单，就是在你使用这个插件的时候，你还可以配合如：animate.css 动画库来实现各种不同的显示效果，如果不设置，插件默认的就是淡入效果。把这两个东西有机地组合可以做出很多很炫的效果。效果怎么炫，这个就得你自己去慢慢研究，慢慢体会了。这里只是抛砖引玉，让你知道这样可以实现一些效果。

那要怎么实现呢，其实也很简单，你只需要在上面一坨代码中找到

el.style.cssText += '-webkit-animation: fadeIn 01s ease 0.2s 1 both;animation: fadeIn 1s ease 0.2s 1 both;';

其中 fadeIn 就是动画效果的名字，为了浏览器兼容，所以就出现了一个有-webkit-前缀和没有-webkit-前缀的CSS3样式，如果如果你已经引入了animate.css 动画库，那么就只需要把动画库里你喜欢的动画效果名替换上面的 fadeIn 即可。如果你像我一样是一个完美主义者，那么当你看到 animate.css 动画库竟然有71k时，想必你已经难过得不要不要的了。那么这个又怎么优化呢？也很简单。animate 在推出之初就已经为你想好了。你要做的就是，从 animate.css 文件中复制对应的效果代码就可以了。

例如你想使用bounceInDown 这个效果如可以这样拷贝代码：

@-webkit-keyframes bounceInDown {
 from, 60%, 75%, 90%, to {
 -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 }

 0% {
 opacity: 0;
 -webkit-transform: translate3d(0, -3000px, 0);
 transform: translate3d(0, -3000px, 0);
 }

 60% {
 opacity: 1;
 -webkit-transform: translate3d(0, 25px, 0);
 transform: translate3d(0, 25px, 0);
 }

 75% {
 -webkit-transform: translate3d(0, -10px, 0);
 transform: translate3d(0, -10px, 0);
 }

 90% {
 -webkit-transform: translate3d(0, 5px, 0);
 transform: translate3d(0, 5px, 0);
 }

 to {
 -webkit-transform: none;
 transform: none;
 }
}
@keyframes bounceInDown {
 from, 60%, 75%, 90%, to {
 -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 }

 0% {
 opacity: 0;
 -webkit-transform: translate3d(0, -3000px, 0);
 transform: translate3d(0, -3000px, 0);
 }

 60% {
 opacity: 1;
 -webkit-transform: translate3d(0, 25px, 0);
 transform: translate3d(0, 25px, 0);
 }

 75% {
 -webkit-transform: translate3d(0, -10px, 0);
 transform: translate3d(0, -10px, 0);
 }

 90% {
 -webkit-transform: translate3d(0, 5px, 0);
 transform: translate3d(0, 5px, 0);
 }

 to {
 -webkit-transform: none;
 transform: none;
 }
}

.bounceInDown {
 -webkit-animation-name: bounceInDown;
 animation-name: bounceInDown;
}

animate 用法拓展

动画必要代码

如果你想在自己的代码中使用animate效果库里的效果，那么你就得注意下了，这里有个小小的坑，如果你只是复制相应的效果代码是不会画起来的，这又是为什么呢？因为你还需要复制一段代码。下面举个例子，让你好好的明白和感受 animate 的用法和运感。正如上面说到的，如果你仅仅只是复制了这一段代码到自己的CSS样式文件里，它是没有任何效果的，因为你还需要把下面这段代码一同拷贝到你的CSS样式文件中。

.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}

那么为什么上面说到的 lazyloadimg 插件使用animate 库就不需要添加这段代码呢？因为刚才说到的那一坨东西时的这行代码

el.style.cssText += '-webkit-animation: fadeIn 01s ease 0.2s 1 both;animation: fadeIn 1s ease 0.2s 1 both;';

请仔细看看，等号右边的代码是不是跟下面这里的很像，很像！！！这会你应该明白为什么了吧？

.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}

这样你就可以把 animate 效果库用得爽哒哒的了。

动画无限循环必要代码

这里还有一个坑，也就是如果你想所使用的动画循环怎么办？同样的方法，把下面 animate.css 文件里开头的这一段代码也放到自己的CSS样式文件里就大功告成了。

.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}