揭秘延迟加载:网页神器让你秒变加载大师!

在这里插入图片描述

📈「作者简介」:不知名十八线技术博主
📚「推荐主页」:阿珊和她的猫
🕐「简历必备」前后端实战项目(推荐:⭐️⭐️⭐️⭐️⭐️)

在 JavaScript 中,延迟加载(或懒加载)是一种优化网页性能的技术。

以下是几种常见的延迟加载方式:

💕1. 延迟加载脚本

<script src="//aeu.alicdn.com/waf/interfaceacting220819.js"></script><script src="//aeu.alicdn.com/waf/antidomxss_v640.js"></script><script>> 标签放在页面底部,以确保在其他内容加载完毕后再加载脚本。
或者使用 JavaScript 动态创建 <script> 标签,并设置其asyncdefer 属性。

当延迟加载脚本时,你可以使用以下两种方法之一:

  1. <script src="//aeu.alicdn.com/waf/interfaceacting220819.js"></script><script src="//aeu.alicdn.com/waf/antidomxss_v640.js"></script><script> 标签放在页面底部:
<!DOCTYPE html>
<html>
<head>
  <title>延迟加载脚本示例</title>
</head>
<body>
  <!-- 页面内容 -->
  
  <script src="your-script.js"></script>
</body>
</html>
  1. 使用 JavaScript 动态创建 <script> 标签,并设置 asyncdefer 属性:
<!DOCTYPE html>
<html>
<head>
  <title>延迟加载脚本示例</title>
</head>
<body>
  <!-- 页面内容 -->
  
  <script>
    // 动态创建 <script> 元素
    var script = document.createElement('script');
    
    // 设置脚本的 src 属性
    script.src = 'your-script.js';
    
    // 设置脚本的 async 或 defer 属性(根据需要选择其中一个)
    script.async = true; // 异步加载脚本
    // script.defer = true; // 延迟加载脚本
    
    // 将脚本插入到文档中
    document.body.appendChild(script);
  </script>
</body>
</html>

上述代码中,your-script.js 是你要延迟加载的脚本文件。将脚本放在页面底部或使用动态创建 <script> 标签的方式,可以确保在页面内容加载完毕后再加载脚本,以提高页面的加载性能和用户体验。根据实际需求,选择适合的方式来延迟加载脚本。

💕2. 图片懒加载

将图片的实际路径存储在自定义属性中,然后将 src 属性设置为占位符或空字符串。当图片进入可视区域时,通过 JavaScript 将实际路径赋值给 src 属性,以实现延迟加载。

图片懒加载可以通过以下 JavaScript 代码实现:

<!DOCTYPE html>
<html>
<head>
  <title>图片懒加载示例</title>
  <style>
    .placeholder {
      width: 200px;
      height: 200px;
      background: #ccc;
    }
  </style>
</head>
<body>
  <h1>图片懒加载示例</h1>
  
  <img class="lazy" data-src="image.jpg" src="placeholder.jpg" alt="Lazy-loaded Image">
  
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      var lazyImages = document.querySelectorAll('img.lazy');

      function lazyLoad() {
        for (var i = 0; i < lazyImages.length; i++) {
          if (lazyImages[i].getAttribute('data-src')) {
            if (lazyImages[i].getBoundingClientRect().top <= window.innerHeight && lazyImages[i].getBoundingClientRect().bottom >= 0) {
              lazyImages[i].src = lazyImages[i].getAttribute('data-src');
              lazyImages[i].removeAttribute('data-src');
            }
          }
        }
      }

      // 监听页面滚动事件和窗口大小变化事件,触发图片懒加载
      window.addEventListener('scroll', lazyLoad);
      window.addEventListener('resize', lazyLoad);
      lazyLoad(); // 页面加载时先执行一次懒加载
    });
  </script>
</body>
</html>

在上面的示例代码中,我们为 img 标签添加了一个自定义属性 data-src ,用于存储实际的图片路径。图片的 src 属性设置为一个占位符图片(例如 placeholder.jpg)。通过监听页面滚动事件和窗口大小变化事件,当图片进入可视区域时,我们将 data-src 的值赋给 src 属性,实现图片的懒加载效果。

注意:在实际应用中,你需要将 image.jpg 替换为实际的图片路径,并根据需要调整占位符图片的样式和尺寸。

💕3. 使用 Intersection Observer API

这是一种现代浏览器提供的 API,用于监测元素是否进入或离开视口。可以利用它来判断元素何时出现在可视区域内,从而触发资源的加载。

使用 Intersection Observer API 实现图片懒加载的代码示例如下:

<!DOCTYPE html>
<html>
<head>
  <title>图片懒加载示例(Intersection Observer API)</title>
  <style>
    .placeholder {
      width: 200px;
      height: 200px;
      background: #ccc;
    }
  </style>
</head>
<body>
  <h1>图片懒加载示例(Intersection Observer API)</h1>
  
  <img class="lazy" data-src="image.jpg" src="placeholder.jpg" alt="Lazy-loaded Image">
  
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      var lazyImages = document.querySelectorAll('img.lazy');

      // 创建 Intersection Observer 实例
      var observer = new IntersectionObserver(function(entries, observer) {
        entries.forEach(function(entry) {
          if(entry.isIntersecting) {
            var lazyImage = entry.target;
            lazyImage.src = lazyImage.getAttribute('data-src');
            observer.unobserve(lazyImage);
          }
        });
      });

      // 监听每个需要懒加载的图片
      lazyImages.forEach(function(lazyImage) {
        observer.observe(lazyImage);
      });
    });
  </script>
</body>
</html>

在上面的示例代码中,我们使用 Intersection Observer API 来监视每个需要懒加载的图片是否进入了可视区域。当图片进入可视区域时,触发 Intersection Observer 的回调函数,并将真实的图片路径赋给 src 属性,同时取消对该图片的监视。

注意:在实际应用中,你需要将 image.jpg 替换为实际的图片路径,并根据需要调整占位符图片的样式和尺寸。另外,Intersection Observer API 有更多的配置选项和用法,你可以根据实际需求进行进一步深入学习和使用。

💕4. 异步加载模块

使用模块加载器(如 RequireJS、Webpack 等)来异步加载 JavaScript 模块,以避免一次性加载所有模块。只有在需要使用某个模块时才进行加载。

异步加载模块可以通过以下 JavaScript 代码实现:

<!DOCTYPE html>
<html>
<head>
  <title>异步加载模块示例</title>
</head>
<body>
  <h1>异步加载模块示例</h1>
  
  <button id="loadModuleButton">加载模块</button>
  
  <script src="//aeu.alicdn.com/waf/interfaceacting220819.js"></script><script src="//aeu.alicdn.com/waf/antidomxss_v640.js"></script><script>
    document.getElementById("loadModuleButton").addEventListener("click", function() {
      var script = document.createElement("script");
      script.src = "module.js";

      script.onload = function() {
        // 模块加载完成后执行的逻辑
        console.log("模块加载成功");
        // 在这里可以开始使用加载的模块
      };

      script.onerror = function() {
        // 模块加载失败的处理逻辑
        console.error("模块加载失败");
      };

      document.head.appendChild(script);
    });
  </script>
</body>
</html>

在上面的示例代码中,我们为页面添加了一个按钮,并监听按钮的点击事件。当按钮被点击时,我们创建一个 <script> 元素,并将要加载的模块的路径赋值给 src 属性。同时,我们设置了 onload 事件处理函数,用于在模块加载完成后执行相应的逻辑。如果模块加载失败,我们设置了 onerror 事件处理函数,用于处理加载失败的情况。

注意:在实际应用中,你需要将 module.js 替换为实际的模块路径。另外,异步加载模块的代码可以根据具体需求进行进一步的封装和优化。

💕5. 按需加载数据

根据用户需求,通过 AJAX 或 Fetch API 异步请求并加载数据,而不是一次性加载所有数据。例如,在滚动到页面底部时加载更多内容。

按需加载数据可以通过以下 JavaScript 代码实现:

<!DOCTYPE html>
<html>
<head>
  <title>按需加载数据示例</title>
</head>
<body>
  <h1>按需加载数据示例</h1>
  
  <button id="loadDataButton">加载数据</button>
  
  <script src="//aeu.alicdn.com/waf/interfaceacting220819.js"></script><script src="//aeu.alicdn.com/waf/antidomxss_v640.js"></script><script>
    document.getElementById("loadDataButton").addEventListener("click", function() {
      // 模拟从服务器获取数据的异步操作
      fetchData().then(function(data) {
        // 数据加载成功后执行的逻辑
        console.log("数据加载成功");
        // 在这里可以使用加载的数据
        console.log(data);
      }).catch(function(error) {
        // 数据加载失败的处理逻辑
        console.error("数据加载失败");
      });
    });

    function fetchData() {
      return new Promise(function(resolve, reject) {
        // 模拟异步获取数据的延迟
        setTimeout(function() {
          // 模拟数据加载成功
          var data = "这是加载的数据";
          resolve(data);
          // 模拟数据加载失败
          // reject(new Error("数据加载失败"));
        }, 2000);
      });
    }
  </script>
</body>
</html>

在上面的示例代码中,我们为页面添加了一个按钮,并监听按钮的点击事件。当按钮被点击时,我们调用 fetchData 函数模拟从服务器异步获取数据的操作。fetchData 函数返回一个 Promise 对象,代表数据加载的异步过程。在 Promise 的 then 方法中,我们可以编写数据加载成功后需要执行的逻辑,如打印加载的数据等。在 catch 方法中,我们可以编写数据加载失败时需要执行的逻辑,如打印错误信息等。

注意:在实际应用中,你需要根据实际情况编写数据获取逻辑,并根据需求调整延迟时间和错误处理方式。另外,按需加载数据的代码可以根据具体需求进行进一步的封装和优化。

这些方式可以根据具体需求和场景进行选择和组合使用,以提高网页加载速度和用户体验。

💕附录:「简历必备」前后端实战项目(推荐:⭐️⭐️⭐️⭐️⭐️)

Vue.js 和 Egg.js 开发企业级健康管理项目
带你从入门到实战全面掌握 uni-app

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值