网站延迟加载js的方法

在 JavaScript 中，可以使用以下几种方式实现延迟加载：

1，使用 setTimeout 或 setInterval：通过设置一个定时器，在指定的时间后执行相关代码或加载资源，例如：

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

2，使用事件监听器：可以监听页面滚动、鼠标移动等事件，当事件触发时再执行相关代码或加载资源，例如：

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

3，使用 Intersection Observer API：Intersection Observer API 可以观察元素是否进入视口，并在满足条件时执行相关代码或加载资源，该 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);

4，使用异步加载脚本：可以通过创建 <script> 标签并将 async 或 defer 属性设置为 true，来实现异步加载脚本。这样可以在页面加载的同时，延迟加载和执行指定的 JavaScript 脚本，例如：

var script = document.createElement('script');
script.src = 'path/to/script.js';
script.async = true; // 异步加载
document.body.appendChild(script);

5，使用动态创建的 <img> 元素：可以通过创建新的 <img> 元素，并将 src 属性设置为要加载的图片路径，来实现延迟加载。当图片加载完成后，可以执行相关代码，例如：

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

这些是常见的 JavaScript 延迟加载的方式，根据具体情况和需求，选择适合的方式来延迟加载代码或资源，以提升页面性能和用户体验。