图片懒加载

Posted 2020-08-22 webNick

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了图片懒加载相关的知识，希望对你有一定的参考价值。

　　图片懒加载一般运用到图片较多的页面，电商类的页面一般都有图片懒加载处理。

步骤：

将要懒加载的网页中的图片都设为同一张loading图片；
给图片设置data-src的属性，保存图片的真实地址；
当图片滚动到可视区域时，将图片src替换为真实地址。

结构层

<ul>
     <li>
         <img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg">
     </li>
     <li>
         <img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg">
     </li>
     <li>
         <img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg">
     </li>
     <li>
         <img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg">
     </li>
     <li>
        <img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg">
     </li>
     <li>
        <img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg">
     </li>
     <li>
         <img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg">
     </li>
     <li>
         <img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg">
     </li>
     <li>
         <img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg">
     </li>
 </ul>

View Code

表现层

容器尺寸最好设置成图片尺寸，避免layout，或者将图片设置成真实地址图片的大小

li{height:300px;}

行为层

下面这句判断图片进入可视区域

obj.getBoundingClientRect().top< document.documentElement.clientHeight

页面加载后首屏自动加载一次，不然进入页面滚动前的图片全是loading图片

window.onload = function() {
         lazyload();
     };

完整代码，已将需要注意的点都加上注释了：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>lazyLoad nick</title>
    <style>
        /*容器尺寸最好设置成图片尺寸，避免layout*/
        li{height:300px;}
    </style>
</head>
<body>
 <ul>
     <li>
         <img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg">
     </li>
     <li>
         <img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg">
     </li>
     <li>
         <img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg">
     </li>
     <li>
         <img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg">
     </li>
     <li>
        <img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg">
     </li>
     <li>
        <img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg">
     </li>
     <li>
         <img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg">
     </li>
     <li>
         <img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg">
     </li>
     <li>
         <img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg">
     </li>
 </ul>

 <script>
     window.onscroll = function() {//滚动加载
         lazyload();
     };
     window.onload = function() {//页面加载后首屏自动加载一次
         lazyload();
     };
     function lazyload(lazy) {
          lazy = lazy||50;//提前加载的距离
         var images = document.images,i = 0, len = images.length;
         for (; i < len; i++) {
             var obj = images[i];
//             obj.getBoundingClientRect().top< document.documentElement.clientHeight 判断元素滚动到可视区返回true
             if (obj.getBoundingClientRect().top - lazy < document.documentElement.clientHeight && !obj.isLoad) {
                 obj.isLoad = true;//判断首次加载
                 imageLoaded(obj, obj.dataset.src);
             }
         }
     }
     function imageLoaded(obj,src){//img加载完成在设置src，避免img从顶部加载到尾部出现的白板
         var img = new Image();
         img.onload = function() {
             obj.src = img.src;
         };
         img.src = src;
     }

 </script>
</body>
</html>

View Code

纯属没事乱捣腾，有建议或意见请q我！

以上是关于图片懒加载的主要内容，如果未能解决你的问题，请参考以下文章

图片懒加载_intersectionObserver