JS【详解】 延迟加载

动态创建标签

动态创建的 <script >

let script = document.createElement("script");
script.src = "path/to/script.js";
document.body.appendChild(script);

动态创建的 <img>

let img = new Image();
img.src = 'path/to/image.jpg';
img.onload = function() {
  // 图片加载完成后执行代码
};

使用 defer 属性

在 <script> 标签中添加 defer 属性，可以将脚本的执行推迟到文档解析完成后再执行。

<script src="path/to/script.js" defer></script>

使用 async 属性

脚本会在下载完成后立即执行

<script src="path/to/script.js" async></script>

动态加载模块（ES6+）

使用动态 import() 方法来延迟加载模块。

import("path/to/module.js")
  .then((module) => {
    // 模块加载成功后的处理逻辑
  })
  .catch((error) => {
    // 模块加载失败的处理逻辑
  });

import() 方法返回一个 Promise，可以使用 then() 方法处理加载成功后的模块，或使用 catch() 方法处理加载失败的情况。

使用 setTimeout 或 setInterval

设置一个定时器，在指定的时间后执行相关代码或加载资源。

setTimeout(function() {
  // 执行延迟加载的代码或加载资源
}, 2000); // 在 2000 毫秒（2 秒）后执行

使用事件监听器

监听页面滚动、鼠标移动等事件，当事件触发时再执行相关代码或加载资源。

window.addEventListener('scroll', function() {
  // 执行延迟加载的代码或加载资源
});

使用 Intersection Observer

Intersection Observer API 可以观察元素是否进入视口，并在满足条件时执行相关代码或加载资源。

const observer = new IntersectionObserver(function(entries) {
  entries.forEach(function(entry) {
    if (entry.isIntersecting) {
      // 元素进入视口，执行延迟加载的代码或加载资源
      observer.unobserve(entry.target); // 停止观察该元素
    }
  });
});
 
const targetElement = document.querySelector('.target');
observer.observe(targetElement);