首页 > 代码库 > 图片懒加载

图片懒加载

2024-08-25 12:53:33   223人阅读

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

步骤：

  • 将要懒加载的网页中的图片都设为同一张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我！

图片懒加载


联系
我们