/lazy-load-img

原生js开发，轻量级的移动端图片懒加载插件

Primary LanguageJavaScript

npm npm npm

安装

  npm install lazy-load-img --save

优势

1.原生js开发，不依赖任何框架或库
2.支持将各种宽高不一致的图片，自动剪切成默认图片的宽高
  比如说你的默认图片是一张正方形的图片，则各种宽度高度不一样的图片，自动剪切成正方形。
  完美解决移动端开发中，用户上传图片宽高不一致而导致的图片变形的问题。<br>
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); //生成一张透明的图片，参数分别是：图片地址，宽度，高度

demo

demo

demo2 将各种宽高不一的图标剪切成默认图片的尺寸大小

demo