图片懒加载

最新推荐文章于 2023-08-12 16:56:48 发布

梓钰

最新推荐文章于 2023-08-12 16:56:48 发布

阅读量340

点赞数

分类专栏： SEO优化入门技巧文章标签：用户体验服务器性能阅读网页设计

SEO优化入门技巧专栏收录该内容

7 篇文章 0 订阅

订阅专栏

首先，为什么要使用懒加载？

目前，对页面加载速度影响最大的就是图片了，一张普通的图片可以达到几M的大小，而代码也许就只有几十KB。当页面图片很多时，页面的加载速度就会变得缓慢，一般在十秒左右页面还没有加载完成的话，也许会失去很多的想要继续阅读下去的用户。

所以，对于图片过多的页面，为了加速页面加载速度，很多时候我们需要将页面内未出现在可视区域内的图片先不做加载，等到滚动到可视区域后再去加载。这样对于页面加载性能上会有很大的提升，也提高了用户体验。

方法一：设置滚轮事件

将页面中的img标签src指向一张小图片或者src为空，然后定义data-src属性指向真实的图片。src指向一张默认的图片，否则当src为空时也会向服务器发送一次请求。可以指向loading的地址。

注：图片要指定宽高

当载入页面时，先把可视区域内的img标签的data-src属性值负给src，然后监听滚动事件，把用户即将看到的图片加载。这样便实现了懒加载。

提醒：在写代码前，需要了解盒子模型中对各种高度的定义以及其区别，这样才不会出现高度的歧义。

代码如下：

[html]view plain copy 
   
 <head>  
     <meta charset="UTF-8">  
     <title>Document</title>  
     <style>  
         img {  
             display: block;  
             margin-bottom: 50px;  
             width: 400px;  
             height: 400px;  
         }  
     </style>  
 </head>  
 <body>  
     <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">  
     <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">  
     <img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt="">  
     <img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt="">  
     <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">  
     <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">  
     <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">  
     <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">  
     <img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt="">  
     <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">  
     <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">  
 </body>  
 //JavaScript原生代码如下：  
 <script>  
     var num = document.getElementsByTagName('img').length;  
     var img = document.getElementsByTagName("img");  
     var n = 0; //存储图片加载到的位置，避免每次都从第一张图片开始遍历  
     lazyload(); //页面载入完毕加载可是区域内的图片  
     window.onscroll = lazyload;  
     function lazyload() { //监听页面滚动事件  
         var seeHeight = document.documentElement.clientHeight;//可见区域高度  
         var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;  
 //滚动条距离顶部高度  
         for (var i = n; i < num; i++) {  
             if (img[i].offsetTop < seeHeight + scrollTop) {  
                 if (img[i].getAttribute("src") == "default.jpg") {  
                     img[i].src = img[i].getAttribute("data-src");  
                 }  
                 n = i + 1;  
             }  
         }  
     }  
 </script>  
 //jQuery原生代码如下：  
 <script>  
     var n = 0,  
         imgNum = $("img").length,  
         img = $('img');  
     lazyload();  
     $(window).scroll(lazyload);  
     function lazyload(event) {  
         for (var i = n; i < imgNum; i++) {  
             if (img.eq(i).offset().top < parseInt($(window).height()) + parseInt($(window).scrollTop())) {  
                 if (img.eq(i).attr("src") == "default.jpg") {  
                     var src = img.eq(i).attr("data-src");  
                     img.eq(i).attr("src", src);  
                     n = i + 1;  
                 }  
             }  
         }  
     }  
 </script>  