玖叶教程网

lazy-load-img.js

1、一个轻量级图片懒加载。

2、不依赖任何框架，原生js开发，支持裁剪图片。

项目中遇到图片渲染过多，虽然分页加载，但还是影响用户体验，分享工作源码，仅供学习参考，共勉！

引入 lazy-load-img.js 底部附下载链接。

<script src="./lazy-load-img.js" type="text/javascript" charset="utf-8"></script>

<div class="item_image">
   <img class="img_box_shop" src="默认图" alt="" data-url="图片路径"  data-src="图片路径">
</div>

//图片裁剪

var lazyLoadImg = new LazyLoadImg({
    el: document.querySelector('.item_image'), //获取图片盒子
    mode: 'diy', //默认模式，将显示原图，diy模式，将自定义剪切，默认剪切居中部分
    time: 300, // 设置一个检测时间间隔
    complete: true, //页面内所有数据图片加载完成后，是否自己销毁程序，true默认销毁，false不销毁
    position: { // 只要其中一个位置符合条件，都会触发加载机制
        top: 0, // 元素距离顶部
        right: 0, // 元素距离右边
        bottom: 0, // 元素距离下面
        left: 0 // 元素距离左边
    },
    diy: { //设置图片剪切规则，diy模式时才有效果
        backgroundSize: 'cover',
        backgroundRepeat: 'no-repeat',
        backgroundPosition: 'center center'
    },
    before: function () { // 图片加载之前执行方法
    },
    success: function (el) { // 图片加载成功执行方法
        el.classList.add('success')
    },
    error: function (el) { // 图片加载失败执行方法
    }
})

 //不裁剪图片 区别  mode: 'default',  diy 裁剪   default不裁剪

var lazyLoadImg = new LazyLoadImg({
        el: document.querySelector('#list'),
        mode: 'default', //默认模式，将显示原图，diy模式，将自定义剪切，默认剪切居中部分
        time: 300, // 设置一个检测时间间隔
        complete: true, //页面内所有数据图片加载完成后，是否自己销毁程序，true默认销毁，false不销毁
        position: { // 只要其中一个位置符合条件，都会触发加载机制
          top: 0, // 元素距离顶部
          right: 0, // 元素距离右边
          bottom: 0, // 元素距离下面
          left: 0 // 元素距离左边
        },
        before: function () { // 图片加载之前执行方法
          
        },
        success: function (el) { // 图片加载成功执行方法
          el.classList.add('success')
        },
        error: function (el) { // 图片加载失败执行方法
          el.src = './images/error.png'
        }
      })

 lazyLoadImg.start() // 重新开启懒加载程序
 lazyLoadImg.destroy() // 销毁图片懒加载程序

代码相对很简单，网上也有很多教程，笔记记录，上手可用，喜欢的动动小手点下赞，谢谢。

代码地址：https://github.com/Skingsking/lazy-load-img-master