怎么做一个图片懒加载插件

会议室坐定,面试官拿到了我的简历做了下来,先让做简单的自我介绍,做完简单的自我介绍之后。面试官马上带有神秘的微笑。

面试官:我们是做技术,我先问你简单几道基础题吧。

问了一个简单的css问题之后,要我讲一讲前端优化。

我:巴拉巴拉讲了一堆
面试官:ok,你刚才讲了前端优化,其中有一个是图片的延迟加载,这在市面上很多网站都有在使用,减少图片的流量节省了自己服务器的带宽开销,也可以避免在进入页面当中,一下子加载非常多的图片造成页面的卡顿,提升用户的体验。你现在来说一下怎么如何实现一个直接就能拿来直接用的js插件。

我:我理理我的思路

  1. 从后台获取url数组后拼接出一个html片段,html片段之中的img 带有两个属性 src 和 data-src ,data-src放着真正的图片地址,src的地址是一种提示在加载中的图片,插入到某个特定的div中。(这里要注意要设置src为一个默认的图片,这样也能撑开容器的div,如果src为空的话,浏览器认为这是一个缺省值,值的内容为当前网页的路径,在不同的浏览器的情况也会出现不同的情况,在某些浏览器会用当前路径进行再一次载入,并把其内容作为图像的二进制内容并试图显示。所以src不能为空,如果为空的话不要出现这个属性

  2. 先设置前面几个图片是已经替换了真正的图片地址。在用户第一次浏览是可以正常浏览图片的。在用户向下滚动的时候,检测图片是否真正进入用户的视口中,如果是的话,图片的src替换为其data-src的值。

我脑里的代码如下:

<ul>  
    <li>
        <h2>0</h2>
        <img src="loading.png" data-src="image.png">
    </li>
</ul>
#content>ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#content>ul img {
    max-width: 100%;
}
let aaa = [
  "http://desk.fd.zol-img.com.cn/t_s1680x1050c5/g5/M00/0F/08/ChMkJ1nN3wKIFYBLABYYda9jJeEAAg5HwJZfCQAFhiN201.jpg",
  "http://desk.fd.zol-img.com.cn/t_s1680x1050c5/g5/M00/0F/09/ChMkJlnN3xSIInfJAAhbjlxhueIAAg5IAD97KQACFum181.jpg",
  "http://desk.fd.zol-img.com.cn/t_s1680x1050c5/g5/M00/0F/09/ChMkJ1nN3xWIO6kzAAifBjFINEoAAg5IADQz0gACJ8e181.jpg",
  "http://desk.fd.zol-img.com.cn/t_s1680x1050c5/g5/M00/0F/09/ChMkJlnN3xSIBS2OAAW3Xcte7gUAAg5IADaudUABbd1114.jpg",
  "http://desk.fd.zol-img.com.cn/t_s1680x1050c5/g5/M00/0F/09/ChMkJ1nN3xOIPLMOAAa3RVBbHzYAAg5IACvluUABrdd002.jpg",
  "http://desk.fd.zol-img.com.cn/t_s1680x1050c5/g5/M00/0F/09/ChMkJlnN3xKIAqdCAAdNKFd-bsMAAg5IACA_T4AB01A468.jpg",
  "http://desk.fd.zol-img.com.cn/t_s1680x1050c5/g5/M00/0F/09/ChMkJ1nN3xGIXvRIAAktWG73tpEAAg5IABMmt0ACS1w197.jpg",
  "http://desk.fd.zol-img.com.cn/t_s1680x1050c5/g5/M00/0F/09/ChMkJ1nN3xKIF27DAAd1CzYWw-8AAg5IAB048kAB3Uj850.jpg",
  "http://desk.fd.zol-img.com.cn/t_s1680x1050c5/g5/M00/0F/08/ChMkJ1nN3w6Ie8DzAA0pP18xNw8AAg5HwPKq-wADSlX433.jpg",
  "http://desk.fd.zol-img.com.cn/t_s1680x1050c5/g5/M00/0F/08/ChMkJ1nN3wyISTRHAA13CHSheT8AAg5HwN17YMADXcg860.jpg",
  "http://desk.fd.zol-img.com.cn/t_s1680x1050c5/g5/M00/0F/08/ChMkJ1nN3wuIJMGgAA7T30TvRxcAAg5HwNgJ4wADtP3311.jpg",
  "http://desk.fd.zol-img.com.cn/t_s1680x1050c5/g5/M00/0F/08/ChMkJlnN3wmIBu7UAA13Kkcxt4MAAg5HwNOlPgADXdC300.jpg",
  "http://desk.fd.zol-img.com.cn/t_s1680x1050c5/g5/M00/0F/08/ChMkJ1nN3wmIQfecAAV5vyC_mn4AAg5HwNEfwMABXnX856.jpg",
  "http://desk.fd.zol-img.com.cn/t_s1680x1050c5/g5/M00/0F/08/ChMkJlnN3wyIBJY3ADbTykFM320AAg5HwOEZHUANtPi311.jpg",
  "http://desk.fd.zol-img.com.cn/t_s1680x1050c5/g5/M00/0F/08/ChMkJlnN3weIV-zdABNMNbQ0ZxcAAg5HwMv8ikAE0xN222.jpg",
  "http://desk.fd.zol-img.com.cn/t_s1680x1050c5/g5/M00/0F/08/ChMkJlnN3waIDvrEACcoryoQmeYAAg5HwL9DmUAJyjH512.jpg",
  "http://desk.fd.zol-img.com.cn/t_s1680x1050c5/g5/M00/0F/08/ChMkJlnN3wSIeWZnAAgP2vwA6g4AAg5HwLxZ1wACA_y179.jpg",
  "http://desk.fd.zol-img.com.cn/t_s1680x1050c5/g5/M00/0F/08/ChMkJ1nN3wiIOCrPAAnElw5qOaEAAg5HwMmLXoACcSv673.jpg",
  "http://desk.fd.zol-img.com.cn/t_s1680x1050c5/g5/M00/0F/08/ChMkJlnN3wOIc7gQAAwXPVbgcDgAAg5HwKUijYADBdV215.jpg",
  "http://desk.fd.zol-img.com.cn/t_s1680x1050c5/g5/M00/0F/08/ChMkJ1nN3wOIfZeYAAw1UaUQmKgAAg5HwKICU0ADDVp374.jpg",
  "http://desk.fd.zol-img.com.cn/t_s1680x1050c5/g5/M00/0F/08/ChMkJlnN3wGIISObABasRoyF0E4AAg5HwJvlLEAFqxe476.jpg",
  "http://desk.fd.zol-img.com.cn/t_s1680x1050c5/g5/M00/0F/08/ChMkJlnN3v-IOpk-ACCvBEV0k9EAAg5HwI2LfwAIK8c011.jpg",
  "http://desk.fd.zol-img.com.cn/t_s1680x1050c5/g5/M00/0F/08/ChMkJ1nN3wSIVvajAE7ravZYBB4AAg5HwKgoYsATuuC491.jpg",
  "http://desk.fd.zol-img.com.cn/t_s1680x1050c5/g5/M00/0F/08/ChMkJ1nN3v2IQxfDACCYcR6zN0kAAg5HwIHv3IAIJiJ083.jpg",
  "http://desk.fd.zol-img.com.cn/t_s1680x1050c5/g5/M00/0F/08/ChMkJ1nN3vuIAK7nACJm7AohR9AAAg5HwGrEjsAImcE709.jpg",
  "http://desk.fd.zol-img.com.cn/t_s1680x1050c5/g5/M00/0F/08/ChMkJ1nN3vmIXzMCAA4xvj7ofDYAAg5HwGBPhMADjHW844.jpg",
  "http://desk.fd.zol-img.com.cn/t_s1680x1050c5/g5/M00/0F/08/ChMkJlnN3vqITf99ACQrqtif-BsAAg5HwHNeT8AJCvC745.jpg",
  "http://desk.fd.zol-img.com.cn/t_s1680x1050c5/g5/M00/0F/08/ChMkJ1nN3veIU16eADlkUV0jx60AAg5HwEYhyYAOWRp126.jpg",
  "http://desk.fd.zol-img.com.cn/t_s1680x1050c5/g5/M00/0F/08/ChMkJlnN3veIRjyIAC9SbCdkfDMAAg5HwFR648AL1KE267.jpg",
  "http://desk.fd.zol-img.com.cn/t_s1680x1050c5/g5/M00/0F/08/ChMkJlnN3vSIExM6ABM8D8sZ-G4AAg5HwDiOl4AEzwn673.jpg"
];

function lazyLoad(urlArr, defaultSrc, imgClassName) {
  let liAry = [];
  urlArr.forEach(function (value, index) {
    if (index < 5) {
      liAry.push(`<li><h2>${index}</h2><img src="${value}"></li>`)
    } else {
      liAry.push(
        `<li><h2>${index}</h2><img class="${imgClassName}" src="${defaultSrc}" data-src="${value}"></li>`
      )
    }
  });
  document.getElementById('content').innerHTML = `<ul>${liAry.join('')}</ul>`;
  return function () {
    var $imgLiArr = document.querySelectorAll(`#content>ul>li>.${imgClassName}`)
    var seeHeight = document.documentElement.clientHeight; //可见区域高度
    var srcollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; //滚动条距离顶部高度
    $imgLiArr.forEach(function (value, index) {
      $this = value
      if ($this.offsetTop < seeHeight + srcollTop) {
        $this.src = $this.getAttribute('data-src')
        if ($this.classList)
          $this.classList.remove(imgClassName);
        else
          $this.className = $this.className.replace(new RegExp('(^|\\b)' + imgClassName.split(' ').join(
            '|') + '(\\b|$)', 'gi'), ' ');
      }
    })
  }
}
let defaultSrc = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1507205986572&di=92f59643f8f5a1f9d45e478781460d1a&imgtype=0&src=http%3A%2F%2Ficon.zol-img.com.cn%2Fask%2Fask_3%2Floading-big.gif';

window.addEventListener('scroll', lazyLoad(aaa, defaultSrc, 'lazyloadimg'), false);

面试官嘴巴张了张,刚准备开口,我马上就补了一句。

onscroll滚动的过程中,如果用户频繁的拉动窗口,这就会碰到性能问题,所以要加上函数的节流(throttle)与去抖(debounce)处理。

此时我脑中的代码如下:

....
....
// 节流函数
function throttle(fn, delay, atLeast) {
  var timeId = null;
  var previous = new Date().getTime();
  return function () {
      var now = new Date().getTime();
      if (now - previous > atLeast) {
          fn();
          previous = now
      } else {
          clearTimeout(timeId);
          timeId = setTimeout(function () {
              fn()
          }, delay)
      }
  }
}

let defaultSrc = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1507205986572&di=92f59643f8f5a1f9d45e478781460d1a&imgtype=0&src=http%3A%2F%2Ficon.zol-img.com.cn%2Fask%2Fask_3%2Floading-big.gif';

window.addEventListener('scroll', throttle(lazyLoad(aaa, defaultSrc, 'lazyloadimg'), 300, 100), false);

恩,不错。面试官还是一脸平静。

面试官:但是还有一个问题你还没有考虑到。如果我延迟加载的是一个个不知道长高的,也不固定长高的的图片,你觉得会发生什么问题呢。

我:可能还会发生图片拉伸的问题吧

面试官:不是 我现在不固定他的长宽高,要让他不拉伸,而且适应窗口,你再想想会出现什么问题。

此处输入图片的描述

我:如果是这样的话,当延迟加载替换src,src被替换之后,因为图片还没有加载出来,就会发生图片容器的高度的塌陷,当图片加载完成之后。就会发生页面的抖动的。

此处输入图片的描述

面试官:那怎么处理这个问题呢。

我:可以给图片外面的容器设置一个宽高来占位,然后可以设置使用宽高和绝对定位让图片铺满整个容器。
而图片的宽高的可以通过后台参数在url中体现,如same图片的url

http://s.same.com/sense/89CFA3DE-7ED9-474E-BC39-138370625400__c0_0_1080_1080__w1080_h1080.jpg

其中后面的w1080代表图片的原始宽度,如h1080代表图片的原始高度。
这样就可以设置图片的原始尺寸数据。
现在可以通过书写两个函数获得设置外部容器的宽高。设置宽高的设置要考虑一个最大宽度,比如视窗的宽度。

// 获取图片的尺寸
function getImageSize(url) {
  ....
  return {
    width:'width',
    height:'height'
  }
}
// 获得外面的容器尺寸
function getWrapper(
  width,
  height,
  maxWidth
) {
  if (width <= maxWidth) {
    return {
    width:width,
    height:height
    }
  } else {
    height = Math.ceil((maxWidth / width) * height);
    width = maxWidth;
    return {
       width:width,
       height:height
    }
  }
}

现在要改变一下html结构

<ul>  
  <li>
      <h2>0</h2>
      <div class="img-wrapper">
          <img src="loading.png" data-src="image.png">
      </div>
  </li>
</ul>

CSS

#content>ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#content>ul img {
  /* max-width: 100%; */
  width: 100%;
}

#content>ul .img-wrapper {
  width: 100%;
  background: #d0d0d0 url('loading-big.gif') no-repeat center;
}

html插入改变

......
urlArr.forEach(function (value, index) {
  let tempSize = getImageSize(value);
  let sizeObj = getWrapper(tempSize.width, tempSize.height, maxWidth);
  if (index < 5) {
    this.liAry.push(
      `<li><h2>${index}</h2><div class="img-wrapper" style="width:${sizeObj.width}px;height:${sizeObj.height}px"><img src="${value}"></div></li>`
    );
  } else {
    this.liAry.push(
      `<li><h2>${index}</h2><div class="img-wrapper" style="width:${sizeObj.width}px;height:${sizeObj.height}px"><img class="lazyloadimg" data-src="${value}"></div></li>`
    );
  }
});

面试官: 恩,可以,但是我们升级一下问题。当我要图片适应窗口,当我拉动窗口的时候,视窗的宽度的变化之后,图片的也要相应作出变化,但是按照你的做法的话,就是要用js去实时改变容器的窗口了。
此处输入图片的描述
我:这个,确实是一个麻烦的地方,
面试官: 能不能让图片容器的高度根据宽度实时变化呢。
我:可以使用padding-bottom来做,用padding-bottom来撑开一个高度,因为margin,padding的百分比是以宽度作为作为基准的,那么可以算出的图片的宽高比换算成百分比作为图片的容器的padding-bottom的百分比即容器的宽高比与图片的一样,然后图片使用绝对定位铺满整个窗口。

现在css样式变成

#content>ul img {
  /* max-width: 100%; */
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

#content>ul .img-wrapper {
  width: 100%;
  background: #d0d0d0 url('loading-big.gif') no-repeat center;
  position: relative;
}

获得图片的宽高比

function getImageAspectRatio(url) {
  ......
  let aspectRatio = (height / width).toFixed(4) * 100;
  return aspectRatio;
}

html插入改变

urlArr.forEach(function (value, index) {
  let tempSize = getImageSize(value);
  let aspectRatio = this.getImageAspectRatio(value);
  if (index < 5) {
    this.liAry.push(
      `<li><h2>${index}</h2><div class="img-wrapper" style="padding-bottom: ${aspectRatio}%"><img src="${value}"></div></li>`
    );
  } else {
    this.liAry.push(
      `<li><h2>${index}</h2><div class="img-wrapper" style="padding-bottom: ${aspectRatio}%"><img class="lazyloadimg" data-src="${value}"></div></li>`
    );
  }
});

面试官: 可以,其实对于这个延迟加载可以延伸很多。但是我们今天就不展开了,今天先面到这,后续人事会通知你的。

最后附上完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片延迟加载-es6 class版本</title>
    <style>
        #content>ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        #content>ul img {
            /* max-width: 100%; */
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }

        #content>ul .img-wrapper {
            width: 100%;
            background: #d0d0d0 url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1507205986572&di=92f59643f8f5a1f9d45e478781460d1a&imgtype=0&src=http%3A%2F%2Ficon.zol-img.com.cn%2Fask%2Fask_3%2Floading-big.gif') no-repeat center;
            position: relative;
        }
    </style>
</head>

<body>
    <div id="content"></div>
    <script>
        let urlArr = [
            "http://desk.fd.zol-img.com.cn/t_s1680x1050c5/g5/M00/0F/08/ChMkJ1nN3wKIFYBLABYYda9jJeEAAg5HwJZfCQAFhiN201.jpg",
            "http://desk.fd.zol-img.com.cn/t_s1680x1050c5/g5/M00/0F/09/ChMkJlnN3xSIInfJAAhbjlxhueIAAg5IAD97KQACFum181.jpg",
            "http://desk.fd.zol-img.com.cn/t_s1680x1050c5/g5/M00/0F/09/ChMkJ1nN3xWIO6kzAAifBjFINEoAAg5IADQz0gACJ8e181.jpg",
            "http://desk.fd.zol-img.com.cn/t_s1680x1050c5/g5/M00/0F/09/ChMkJlnN3xSIBS2OAAW3Xcte7gUAAg5IADaudUABbd1114.jpg",
            "http://desk.fd.zol-img.com.cn/t_s1680x1050c5/g5/M00/0F/09/ChMkJ1nN3xOIPLMOAAa3RVBbHzYAAg5IACvluUABrdd002.jpg",
            "http://desk.fd.zol-img.com.cn/t_s1680x1050c5/g5/M00/0F/09/ChMkJlnN3xKIAqdCAAdNKFd-bsMAAg5IACA_T4AB01A468.jpg",
            "http://desk.fd.zol-img.com.cn/t_s1680x1050c5/g5/M00/0F/09/ChMkJ1nN3xGIXvRIAAktWG73tpEAAg5IABMmt0ACS1w197.jpg",
            "http://desk.fd.zol-img.com.cn/t_s1680x1050c5/g5/M00/0F/09/ChMkJ1nN3xKIF27DAAd1CzYWw-8AAg5IAB048kAB3Uj850.jpg",
            "http://desk.fd.zol-img.com.cn/t_s1680x1050c5/g5/M00/0F/08/ChMkJ1nN3w6Ie8DzAA0pP18xNw8AAg5HwPKq-wADSlX433.jpg",
            "http://desk.fd.zol-img.com.cn/t_s1680x1050c5/g5/M00/0F/08/ChMkJ1nN3wyISTRHAA13CHSheT8AAg5HwN17YMADXcg860.jpg",
            "http://desk.fd.zol-img.com.cn/t_s1680x1050c5/g5/M00/0F/08/ChMkJ1nN3wuIJMGgAA7T30TvRxcAAg5HwNgJ4wADtP3311.jpg",
            "http://desk.fd.zol-img.com.cn/t_s1680x1050c5/g5/M00/0F/08/ChMkJlnN3wmIBu7UAA13Kkcxt4MAAg5HwNOlPgADXdC300.jpg",
            "http://desk.fd.zol-img.com.cn/t_s1680x1050c5/g5/M00/0F/08/ChMkJ1nN3wmIQfecAAV5vyC_mn4AAg5HwNEfwMABXnX856.jpg",
            "http://desk.fd.zol-img.com.cn/t_s1680x1050c5/g5/M00/0F/08/ChMkJlnN3wyIBJY3ADbTykFM320AAg5HwOEZHUANtPi311.jpg",
            "http://desk.fd.zol-img.com.cn/t_s1680x1050c5/g5/M00/0F/08/ChMkJlnN3weIV-zdABNMNbQ0ZxcAAg5HwMv8ikAE0xN222.jpg",
            "http://desk.fd.zol-img.com.cn/t_s1680x1050c5/g5/M00/0F/08/ChMkJlnN3waIDvrEACcoryoQmeYAAg5HwL9DmUAJyjH512.jpg",
            "http://desk.fd.zol-img.com.cn/t_s1680x1050c5/g5/M00/0F/08/ChMkJlnN3wSIeWZnAAgP2vwA6g4AAg5HwLxZ1wACA_y179.jpg",
            "http://desk.fd.zol-img.com.cn/t_s1680x1050c5/g5/M00/0F/08/ChMkJ1nN3wiIOCrPAAnElw5qOaEAAg5HwMmLXoACcSv673.jpg",
            "http://desk.fd.zol-img.com.cn/t_s1680x1050c5/g5/M00/0F/08/ChMkJlnN3wOIc7gQAAwXPVbgcDgAAg5HwKUijYADBdV215.jpg",
            "http://desk.fd.zol-img.com.cn/t_s1680x1050c5/g5/M00/0F/08/ChMkJ1nN3wOIfZeYAAw1UaUQmKgAAg5HwKICU0ADDVp374.jpg",
            "http://desk.fd.zol-img.com.cn/t_s1680x1050c5/g5/M00/0F/08/ChMkJlnN3wGIISObABasRoyF0E4AAg5HwJvlLEAFqxe476.jpg",
            "http://desk.fd.zol-img.com.cn/t_s1680x1050c5/g5/M00/0F/08/ChMkJlnN3v-IOpk-ACCvBEV0k9EAAg5HwI2LfwAIK8c011.jpg",
            "http://desk.fd.zol-img.com.cn/t_s1680x1050c5/g5/M00/0F/08/ChMkJ1nN3wSIVvajAE7ravZYBB4AAg5HwKgoYsATuuC491.jpg",
            "http://desk.fd.zol-img.com.cn/t_s1680x1050c5/g5/M00/0F/08/ChMkJ1nN3v2IQxfDACCYcR6zN0kAAg5HwIHv3IAIJiJ083.jpg",
            "http://desk.fd.zol-img.com.cn/t_s1680x1050c5/g5/M00/0F/08/ChMkJ1nN3vuIAK7nACJm7AohR9AAAg5HwGrEjsAImcE709.jpg",
            "http://desk.fd.zol-img.com.cn/t_s1680x1050c5/g5/M00/0F/08/ChMkJ1nN3vmIXzMCAA4xvj7ofDYAAg5HwGBPhMADjHW844.jpg",
            "http://desk.fd.zol-img.com.cn/t_s1680x1050c5/g5/M00/0F/08/ChMkJlnN3vqITf99ACQrqtif-BsAAg5HwHNeT8AJCvC745.jpg",
            "http://desk.fd.zol-img.com.cn/t_s1680x1050c5/g5/M00/0F/08/ChMkJ1nN3veIU16eADlkUV0jx60AAg5HwEYhyYAOWRp126.jpg",
            "http://desk.fd.zol-img.com.cn/t_s1680x1050c5/g5/M00/0F/08/ChMkJlnN3veIRjyIAC9SbCdkfDMAAg5HwFR648AL1KE267.jpg",
            "http://desk.fd.zol-img.com.cn/t_s1680x1050c5/g5/M00/0F/08/ChMkJlnN3vSIExM6ABM8D8sZ-G4AAg5HwDiOl4AEzwn673.jpg"
        ];
        class ImgLazyLoad {
            constructor(imgUrlArr) {
                this.imgUrlArr = imgUrlArr;
                this.liAry = [];
                this.imgUrlArr.forEach((value, index) => {
                    let aspectRatio = this.getImageAspectRatio(value);
                    if (index < 5) {
                        this.liAry.push(
                            `<li><h2>${index}</h2><div class="img-wrapper" style="padding-bottom: ${aspectRatio}%"><img src="${value}"></div></li>`
                        );
                    } else {
                        this.liAry.push(
                            `<li><h2>${index}</h2><div class="img-wrapper" style="padding-bottom: ${aspectRatio}%"><img class="lazyloadimg" data-src="${value}"></div></li>`
                        );
                    }
                })
            }
            init() {
                document.getElementById('content').innerHTML = `<ul>${this.liAry.join('')}</ul>`;
                let fn = this.throttle(this.loadMore, 200, 100);
                window.onscroll = function () {
                    fn();
                }
            }
            getImageAspectRatio(url) {
                let tempReg = url.replace(/.*?(t_s\d{3,10}x\d{3,10}).*/g, '$1');
                let width = parseInt(tempReg.replace(/t_s(\d{3,10})x(\d{3,10})/, '$1'));
                let height = parseInt(tempReg.replace(/t_s(\d{3,10})x(\d{3,10})/, '$2'));
                let aspectRatio = (height / width).toFixed(4) * 100;
                return aspectRatio;
            }
            throttle(fn, delay, atLeast) {
                var timeId = null;
                var previous = new Date().getTime();
                return function () {
                    var now = new Date().getTime();
                    if (now - previous > atLeast) {
                        fn();
                        previous = now
                    } else {
                        clearTimeout(timeId);
                        timeId = setTimeout(function () {
                            fn()
                        }, delay)
                    }
                }
            }
            loadMore() {
                const imgClassName = 'lazyloadimg';
                var $imgLiArr = document.querySelectorAll(`#content>ul>li>div>.${imgClassName}`);
                var seeHeight = document.documentElement.clientHeight; //可见区域高度
                var srcollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; //滚动条距离顶部高度
                $imgLiArr.forEach(function (value, index) {
                    let $this = value
                    if ($this.offsetTop < seeHeight + srcollTop) {
                        $this.src = $this.getAttribute('data-src');
                        if ($this.classList)
                            $this.classList.remove(imgClassName);
                        else
                            $this.className = $this.className.replace(new RegExp('(^|\\b)' + imgClassName.split(
                                ' ').join('|') + '(\\b|$)', 'gi'), ' ');
                    }
                })
            }
        }
        let imgListDom = new ImgLazyLoad(urlArr);
        imgListDom.init();
    </script>
</body>

</html>

demo地址(es6写的,请在高版本浏览器上运行)

comments powered by Disqus