美文网首页
图片懒加载插件lazy-load-img

图片懒加载插件lazy-load-img

作者: amourz2008 | 来源:发表于2017-04-19 10:53 被阅读0次
    var lazyLoadImg = new LazyLoadImg({
          el: document.querySelector('#list'),
          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) {
              el.src = './images/error.png'
          }
      })
    
      // lazyLoadImg.start() // 重新开启懒加载程序
      // lazyLoadImg.destroy() // 销毁图片懒加载程序
    

    git地址

    相关文章

      网友评论

          本文标题:图片懒加载插件lazy-load-img

          本文链接:https://www.haomeiwen.com/subject/bymczttx.html