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);