如何实现图片的懒加载

最新推荐文章于 2024-05-30 17:38:42 发布

如果决定要走又何必挽留

最新推荐文章于 2024-05-30 17:38:42 发布

阅读量457

点赞数

分类专栏：面试题 Vue 文章标签： html javascript 前端 vue.js

本文链接：https://blog.csdn.net/qq_59076775/article/details/122177009

版权

Vue 同时被 2 个专栏收录

58 篇文章 7 订阅

订阅专栏

面试题

27 篇文章 1 订阅

订阅专栏

一.图片懒加载的意义(为什么要使用图片懒加载)

对页面加载速度影响最大的就是图片,一张普通的图片可以达到几M的大小,而代码也许就只有几十KB。当页面图片很多时,页面的加载速度缓慢,几分钟页面还没有加载完毕会失去很多的用户。

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

二.原理

通过src指向一张小图片,然后定义data-src(这个属性可以自定义命名, 我才用data-src )属性指向真实的图片,src指向一张默认的图片,否则src为空时会向服务器发送一次请求。当页面加载到可视区的时候,先把可视区的img标签的data-src属性值赋给src,然后监听滚动事件,然后监听滚动事件,把用户即将看到的图片加载。这样便实现了懒加载。

三.代码实现

在实现之前,先回顾一下流程, 可视区的高度+滚动的距离>=图片距离顶部的距离，此时把假的src属性,换上真的地址,这样就避免了,你一开始打开页面就加载图片,早成卡顿的问题句号。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    img{
      width: 200px;
      height: 200px;
    }
    .aa{
      margin-top: 500px;
    }
  </style>
 
</head>
<body>
  <div class="aa">
    <img data-src="./NS.jpg" src="default.jpg" alt="" >
    <img data-src="./NS3.jpg" src="default.jpg" alt="" >
    <img data-src="./NS5.jpg" src="default.jpg" alt="" >
    <img data-src="./NS6.jpg" src="default.jpg" alt="" >
    <img data-src="./NS.jpg" src="default.jpg" alt="" >
    <img data-src="./NS3.jpg" src="default.jpg" alt="" >
    <img data-src="./NS5.jpg" src="default.jpg" alt="" >
    <img data-src="./NS6.jpg" src="default.jpg" alt="" >

  </div>
 
</body>
<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) {
               console.log('开始更换并且实现懒加载');
                 if (img[i].getAttribute("src") == "default.jpg") {
                     img[i].src = img[i].getAttribute("data-src");
                 }
                 n = i + 1;
             }
         }
     }
 
   </script>
</html>

如果决定要走又何必挽留

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何实现图片的懒加载

一.图片懒加载的意义(为什么要使用图片懒加载)对页面加载速度影响最大的就是图片,一张普通的图片可以达到几M的大小,而代码也许就只有几十KB。当页面图片很多时,页面的加载速度缓慢,几分钟页面还没有加载完毕会失去很多的用户。所以，对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载, 等到滚动到可视区域后再取加载。这样子对于页面加载性能上会有很大的提升,也提高了用户体验。二.原理将 ...
复制链接

扫一扫