原生js實現圖片懶加載

頁面多塊區域垂直水平滾動後的圖片懶加載

git地址
案例預覽地址

1: npm引入

npm i -S i-lazy-load

2：獲取dist目錄下面文件

使用說明：

給父容器設置滾動overflow:auto, 圖片容器添加data-src或者data-background-src便可


 <div class="right-wrap">
  <img index="1"
    data-src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3193768446,2243374232&fm=26&gp=0.jpg"
    alt="">
  <img class="data-bg" index="2"
    data-background-src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=247517070,1591581274&fm=26&gp=0.jpg"
    alt=""></img>
</div>

注意: 使用插件以前須要用css把頁面的佈局好，圖片容器必定須要設置寬度和高度


var windowImgLoad = new ImgLazyLoad({
  target: window,
  el: '.right-wrap',
  distance: 50,
  interval: 250,
  beforeLoad: function(el) {
    console.log(el)
  },
  finishLoad: function(el) {
    console.log(el)
  },
  errorLoad: function(el, event) {
    console.log(el, event)
  }
})

參數說明：
target      null|window      若是是整個頁面滾動須要這是target爲window
el          string           須要滾動的區域元素
distance    number           距離可視區多遠的距離開始加載圖片
interval    number           滾動條中止多少毫秒後執行懶加載
beforeLoad  function         圖片開始加載執行函數
finishLoad  function         圖片加載成功執行函數
errorLoad   function         圖片加載錯誤執行函數

外部調用方法：
windowImgLoad.refresh();
windowImgLoad.distroryed();

refresh()      從新初始化加載圖片（用於無限滾動或者分頁)
distroryed()   銷燬滾動事件

QQ交流羣：475870039