圖片懶載入js實現

bigZMC發表於2019-02-16
JS

1.懶載入原理

懶載入實現原理很簡單,通過在img標籤中設定一個H5自定義屬性,在元素出現在可視區域時,替換預設的載入圖片來達到效果

2.實現程式碼

<div id="root">
  <img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1545210653&di=173f4d639097ddf9e69ed23cd0da47f9&src=http://img.mp.sohu.com/upload/20170720/cd59c28a4c6d49bc8b4ecfcdffbc04f1_th.png"
    data-is-loaded="false" src="https://segmentfault.comhttps://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545220763007&di=45a5220dafdb197a4ab5316c2a42f734&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2Fac4bd11373f08202237cd08a49fbfbedaa641b9c.jpg" />
  <img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1545210653&di=173f4d639097ddf9e69ed23cd0da47f9&src=http://img.mp.sohu.com/upload/20170720/cd59c28a4c6d49bc8b4ecfcdffbc04f1_th.png"
    data-is-loaded="false" src="https://segmentfault.comhttps://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545220911449&di=ca58cde281401ca95b098f6047f698db&imgtype=0&src=http%3A%2F%2Fimg5.xiazaizhijia.com%2Fwalls%2F20150417%2Fmid_84422024ff063d3.jpg" />
  <img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1545210653&di=173f4d639097ddf9e69ed23cd0da47f9&src=http://img.mp.sohu.com/upload/20170720/cd59c28a4c6d49bc8b4ecfcdffbc04f1_th.png"
    data-is-loaded="false" src="https://segmentfault.comhttps://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545220911448&di=63a249145a90ae1681ce0b9c61354f2c&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F9e3df8dcd100baa1f437f36f4d10b912c9fc2ece.jpg" />
  <img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1545210653&di=173f4d639097ddf9e69ed23cd0da47f9&src=http://img.mp.sohu.com/upload/20170720/cd59c28a4c6d49bc8b4ecfcdffbc04f1_th.png"
    data-is-loaded="false" src="https://segmentfault.comhttps://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545220911448&di=565668b21f797bef07c944c4f638c14a&imgtype=0&src=http%3A%2F%2Fpic.qiantucdn.com%2F58pic%2F13%2F71%2F35%2F24k58PICSiB_1024.jpg" />
  <img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1545210653&di=173f4d639097ddf9e69ed23cd0da47f9&src=http://img.mp.sohu.com/upload/20170720/cd59c28a4c6d49bc8b4ecfcdffbc04f1_th.png"
    data-is-loaded="false" src="https://segmentfault.comhttps://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545220911447&di=bf7ab0359c7c5f998d73671e1e62c5bb&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3D8a953b1817950a7b6138468762b808ac%2F03087bf40ad162d9344e02321bdfa9ec8a13cd78.jpg" />
  <img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1545210653&di=173f4d639097ddf9e69ed23cd0da47f9&src=http://img.mp.sohu.com/upload/20170720/cd59c28a4c6d49bc8b4ecfcdffbc04f1_th.png"
    data-is-loaded="false" src="https://segmentfault.comhttps://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545220911446&di=8d04c9b363f1a924a96fb109276e890a&imgtype=0&src=http%3A%2F%2Fpic20.photophoto.cn%2F20110902%2F0034034471873095_b.jpg" />
  <img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1545210653&di=173f4d639097ddf9e69ed23cd0da47f9&src=http://img.mp.sohu.com/upload/20170720/cd59c28a4c6d49bc8b4ecfcdffbc04f1_th.png"
    data-is-loaded="false" src="https://segmentfault.comhttps://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545220911446&di=5dce0c273b95e9b80afe5573c730aa54&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F0%2F5789d87be269b.jpg" />
  <img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1545210653&di=173f4d639097ddf9e69ed23cd0da47f9&src=http://img.mp.sohu.com/upload/20170720/cd59c28a4c6d49bc8b4ecfcdffbc04f1_th.png"
    data-is-loaded="false" src="https://segmentfault.comhttps://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545220911446&di=1f8feec9ccc9f136f658ca39e5889545&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F13%2F16%2F42%2F18F58PIChTy_1024.jpg" />
  <img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1545210653&di=173f4d639097ddf9e69ed23cd0da47f9&src=http://img.mp.sohu.com/upload/20170720/cd59c28a4c6d49bc8b4ecfcdffbc04f1_th.png"
    data-is-loaded="false" src="https://segmentfault.comhttps://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545220911447&di=b6e2f4553b12b4822788bc637a239f94&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F83025aafa40f4bfbfbba4380094f78f0f63618ff.jpg" />
  <img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1545210653&di=173f4d639097ddf9e69ed23cd0da47f9&src=http://img.mp.sohu.com/upload/20170720/cd59c28a4c6d49bc8b4ecfcdffbc04f1_th.png"
    data-is-loaded="false" src="https://segmentfault.comhttps://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545220991377&di=742d7957b05c57bd3c19c43ab736056f&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F38dbb6fd5266d016c2a2ac069c2bd40735fa3560.jpg" />
</div>
// 定時器,300ms延遲後載入圖片
let timer = null;
let loadingImgUrl =
  `https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1545210653&di=173f4d639097ddf9e69ed23cd0da47f9&src=http://img.mp.sohu.com/upload/20170720/cd59c28a4c6d49bc8b4ecfcdffbc04f1_th.png`;
let loadingHeight = 0;
let n = 0;

function lazyload() {
  let imgs = document.getElementById(`root`).getElementsByTagName(`img`);
  // 獲取可視視窗高度
  let viewHeight = document.documentElement.clientHeight;
  for (let i = 0; i < imgs.length; i++) {
    let img = imgs[i];
    // 獲取圖片離可視區域頂部的距離
    let top = img.getBoundingClientRect().top;
    if(`false` == img.dataset.isLoaded && ((0 <= top && top <= viewHeight) || (top <= 0 && Math.abs(top) <= loadingHeight))) {
      // 列印1,2,...,9,10
      console.log(++n);
      // 替換src
      img.src = img.dataset.src;
      img.dataset.isLoaded = true;
    }
  }
}

let image = new Image();
image.src = loadingImgUrl;

// 先載入loading圖片,避免獲取的img標籤top屬性不正確
image.onload = function () {
  loadingHeight = image.height;
  lazyload();
}

window.addEventListener(`scroll`, function () {
  clearTimeout(timer);
  timer = setTimeout(function () {
    lazyload();
  }, 300);
})

相關文章