圖片懶加載插件lazy-load-img

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地址

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容