关于javascript:前端懒加载和预加载

懒加载和预加载的目标都是为了进步用户的体验,二者行为是相同的,一个是提早加载,另一个是提前加载。懒加载对缓解服务器压力有肯定作用,预加载则会增长服务器前端压力缓存。

懒加载 lazyload

懒加载:又叫提早加载、按需加载,当咱们关上一个网页,优先展现的首屏图片就先加载,而其余的图片,等到须要去展现的时候再去申请图片资源。

目标:更好的加载页面的首屏内容,对于含有不少图片的比拟长的网页来讲,可能加载的更快,防止了首次关上时,一次性加载过多图片资源,是对网页性能的一种优化形式。

原理:浏览器解析到img标签的src有值,才会去发动申请,那么就能够让图片须要展现时,才对其src赋值真正的图片地址。

实现代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>图片懒加载</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      img {
        margin: 50px;
        width: 400px;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <div class="img-container">
      <img
        src="loading.gif"
        alt=""
        data-src="1.jpg"
        class="lazyload"
      />
    </div>
    <div class="img-container">
      <img
        src="loading.gif"
        alt=""
        data-src="2.jpg"
        class="lazyload"
      />
    </div>
    <div class="img-container">
      <img
        src="loading.gif"
        alt=""
        data-src="3.jpg"
        class="lazyload"
      />
    </div>
    <div class="img-container">
      <img
        src="loading.gif"
        alt=""
        data-src="4.jpg"
        class="lazyload"
      />
    </div>
    <div class="img-container">
      <img
        src="loading.gif"
        alt=""
        data-src="5.jpg"
        class="lazyload"
      />
    </div>
​
    <script>
      const imgs = [...document.querySelectorAll(".lazyload")]; //img元素转换成数组
      lazyload();  //初始调用一次
      window.addEventListener("scroll", lazyload, false);  //监听滚动时也调用lazyload函数,冒泡阶段
      //懒加载
      function lazyload() {
        for (let i = 0; i < imgs.length; i++) {
          const $img = imgs[i];          //每次循环拿到每一个img元素
          if (isInVisibleArea($img)) {   //判断img元素是否在可视区域内
            $img.src = $img.dataset.src; //用data-src替换src属性
            imgs.splice(i, 1);           //对应该索引的元素删掉
            i--;  
          }
        }
      }
      // 判断DOM元素是否在可视区域内,返回true/false
      function isInVisibleArea($el) {
        const rect = $el.getBoundingClientRect();
        console.log(rect);
        return rect.bottom > 0 && rect.top < window.innerHeight && rect.right > 0 && rect.left < window.innerWidth;
      }
    </script>
  </body>
</html>

实现细节

1 如何加载图片

用img的data-src属性寄存真正须要显示的图片的门路,当页面滚动直到图片呈现在可视区域时,将data-src中的图片地址值赋值给src属性值。

2 如何判断一个元素呈现在可视区域

监听滚动事件,用getBoundingClientRect()获取DOM元素在页面的地位,该函数返回rect对象,如下图所示,如果rect.bottom为正数,rect.top大于页面高度,或者rect.right为正数,或者rect.left大于页面宽度,则认为元素已不在页面的可视区域。

const rect = element.getBoundingClientRect();
  • rect.top:元素上边到视窗上边的间隔;
  • rect.bottom:元素下边到视窗上边的间隔;
  • rect.left:元素右边到视窗右边的间隔;
  • rect.right:元素左边到视窗右边的间隔;
  • window.innerHeight:视窗高度
  • window.innerWidth: 视窗宽度

实现成果

参考视频解说:进入学习

利用开发者工具咱们能够看到如下截图:

  • 最后关上页面:只显示前两张图片,前面三张图片还没有呈现在以后页面

因为前面三张还没有呈现,那么就放弃loading.gif,这样就节俭了加载的工夫,当咱们持续滚动直到呈现页面底部,通过开发者工具看到如下的截图:

预加载 preload

预加载提前加载所须要的图片资源,加载结束后会缓存到本地,当须要时能够立即显示进去。

目标:看完一张图片,再看下一张时,会有一段空白的加载工夫,如果网络不是很好,加载的工夫就会比拟久,预加载能够让用户无需期待,取得间接预览的良好体验。

利用场景:看漫画时,如果咱们看完 2 了 ,想看 33 却还没加载完就会大大降低体验感,而如果能在咱们预览 2 这段时间里就提前加载好 3 , 等到咱们看 3 时就间接外面显示。那么就体验会好很多。

实现办法

1 通过CSS

步骤

  • 创立用来预加载的标签
  • 给标签应用背景图,背景图的门路是须要预加载的图片资源,并将图片移到看不见的中央,或放大到看不见。
  • 当应用到曾经预加载好的图片时,会间接应用缓存好的图片资源,而不须要向服务器发送申请。
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
  <title>CSS 预加载</title>
  <style>
    ul,li{ 
      padding:0;
      margin:0;
      list-style:none;
    }
    img {
      width: 300px;
    }
    #preImg1 {
      background-image: url('1.jpg');
      width: 0;
      height: 0;  /* 暗藏用来预加载的标签 */
    }
    #preImg2 {
      background-image: url('2.jpg');
      width: 0;
      height: 0;
    }
    #preImg3 {
      background-image: url('3.jpg');
      width: 0;
      height: 0;
    }
  </style>
</head>
<body>
  <button onclick="show()">点击显示图片</button>
  <ul>
    <li id="preImg1"/>
    <li id="preImg2"/>
    <li id="preImg3"/>
  </ul>
</body>
<script>
  const show = function () {
    document.querySelector("ul").innerHTML = `
      <li><img src="1.jpg"></li>
      <li><img src="2.jpg"></li>
      <li><img src="3.jpg"></li>`
  }
</script>
</html>

2 通过JavaScript

步骤

  • 将须要预加载的图片资源的 URL 保留在数组里
  • 循环遍历 URL 数组执行以下步骤,直到完结
  • 创立一个 image 对象 new Image()
  • 将 image 对象的 src 属性的值指定为预加载图片的 URL
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>图片预加载</title>
    <style>
      .img-container {
        display: flex;
        align-items: center;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.5);
      }
      img {
        width: 100%;
      }
      * {
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div class="img-container">
      <img src="1.jpg" alt="" id="img" />
    </div>

    <script>
      const imgs = [
        "2.jpg",
        "3.jpg",
        "4.jpg",
        "5.jpg",
      ];
      let i = 0;
      const $img = document.getElementById("img");

      // 页面一开始调用preload,加载数组的第一个元素
      preload(imgs[i])
        .then((data) => {})
        .catch(() => {});

      // 点击切换
      $img.addEventListener(
        "click",
        () => {
          if (i < imgs.length) {
            $img.src = imgs[i];  // 将数组元素的src赋值给页面元素
            i++;
            if (i < imgs.length) { 
              preload(imgs[i]);  // 当索引小于数组length,预加载下一个图片
            }
          } else {
            console.log("曾经是最初一张了!");  // 当 索引和 数组length雷同 则数组内没元素了
          }
        },
        false
      );

      // 预加载
      function preload(src) {
        return new Promise((resolve, reject) => {
          const image = new Image();  // 创立一个新的图片标签
          image.addEventListener("load", () => resolve(image), false);  // 图片加载实现调用胜利状态
          image.addEventListener("error", () => reject(), false);   // 图片加载失败调用失败状态
          image.src = src;  // 将传进来的src赋值给新的图片
        });
      }
    </script>
  </body>
</html>

实现成果

总结比照

懒加载 预加载
定义 提早加载、按需加载 提前加载、不须要也提前加载
目标 更好更快地加载页面首屏内容,网页性能优化 让用户无需期待,取得间接预览的良好体验
毛病 须要监听图片是否显示,消耗浏览器性能 占用较多的后盾资源,可能一次性加载较多的图片
利用场景 电商搜寻产品时图片展现 观看漫画时,每次切换的下一张图片提前加载

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据