图片懒加载

1.原理

当页面图片比较多的时候,加载速度会比较慢,所以为了增加页面加载速度,先将可视区域内的图片加载,其他区域的图片暂不加载,等到滚动到可视区域内,再去加载图片,会缓解一部分服务器的压力,提升性能.

2.实现步骤

将页面中的img标签的src指向占位图片(小图片),然后自定义data-src属性,指向真实引入的图片.

<img src="placeholder.png" data-src="https://img01.jhcms.com/wmdemo/photo/201707/20170727_CC1C74F71145C7D4FBEA447FE89DDD7C.jpg">

先将可视区域内的图片的src替换成data-src内的值

    var img= document.getElementsByTagName('img'),
          len = img.length,
          n = 0;
    function lazypic(){
        var visibleHeight = document.documentElement.clientHeight,
              scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        for(let i = n;i<len;i++){
            if(img[i].offsetTop < visibleHeight + scrollTop){
                if(img[i].getAttribute('src') == 'placeholder.png'){
                    img[i].src = img[i].getAttribute('data-src')
                }
                n =  i + 1
            }
        }
    }

然后监听滚动事件,把即将出现在可视区域内的图片加载出来.
```
    window.onscroll = lazypic;
```

3.代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
    <style>
          img {
              display: block;
              margin-bottom: 50px;
          }
    </style>
    </head>
    <body>
      <img src="placeholder.png" data-src="https://img01.jhcms.com/wmdemo/photo/201707/20170727_CC1C74F71145C7D4FBEA447FE89DDD7C.jpg">
      <img src="placeholder.png" data-src="https://img01.jhcms.com/demo/photo/201801/20180129_CA90F1C619019CE324AAE33479EEBA58.png" alt="">
      <img src="placeholder.png" data-src="https://img01.jhcms.com/demo/photo/201711/20171103_B328846ADC0A115B3C450F4C76160572.png" alt="">
      <img src="placeholder.png" data-src="https://img01.jhcms.com/wmdemo/photo/201707/20170727_CC1C74F71145C7D4FBEA447FE89DDD7C.jpg">
      <img src="placeholder.png" data-src="https://img01.jhcms.com/demo/photo/201801/20180129_CA90F1C619019CE324AAE33479EEBA58.png" alt="">
      <img src="placeholder.png" data-src="https://img01.jhcms.com/demo/photo/201711/20171103_B328846ADC0A115B3C450F4C76160572.png" alt="">
      <img src="placeholder.png" data-src="https://img01.jhcms.com/wmdemo/photo/201707/20170727_CC1C74F71145C7D4FBEA447FE89DDD7C.jpg">
      <img src="placeholder.png" data-src="https://img01.jhcms.com/demo/photo/201801/20180129_CA90F1C619019CE324AAE33479EEBA58.png" alt="">
      <img src="placeholder.png" data-src="https://img01.jhcms.com/demo/photo/201711/20171103_B328846ADC0A115B3C450F4C76160572.png" alt="">
      <img src="placeholder.png" data-src="https://img01.jhcms.com/wmdemo/photo/201707/20170727_CC1C74F71145C7D4FBEA447FE89DDD7C.jpg">
      <img src="placeholder.png" data-src="https://img01.jhcms.com/demo/photo/201801/20180129_CA90F1C619019CE324AAE33479EEBA58.png" alt="">
      <img src="placeholder.png" data-src="https://img01.jhcms.com/demo/photo/201711/20171103_B328846ADC0A115B3C450F4C76160572.png" alt=""> 
  </body>
  <script>
     var img= document.getElementsByTagName('img'),
          len = img.length,
          n = 0;
     lazypic();
     window.onscroll = lazypic;
     function lazypic(){
        var visibleHeight = document.documentElement.clientHeight,
              scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        for(let i = n;i<len;i++){
            if(img[i].offsetTop < visibleHeight + scrollTop){
                if(img[i].getAttribute('src') == 'placeholder.png'){
                    img[i].src = img[i].getAttribute('data-src')
                }
                n =  i + 1
            }
        }
    }
  </script>
  </html>

最后编辑于：2018.02.06 16:55:42

图片懒加载

1.原理

2.实现步骤

将页面中的img标签的src指向占位图片(小图片),然后自定义data-src属性,指向真实引入的图片.

先将可视区域内的图片的src替换成data-src内的值

然后监听滚动事件,把即将出现在可视区域内的图片加载出来.

3.代码