文章目录
📈「作者简介」:不知名十八线技术博主
📚「推荐主页」:阿珊和她的猫
🕐「简历必备」前后端实战项目(推荐:⭐️⭐️⭐️⭐️⭐️)
在 JavaScript 中,延迟加载(或懒加载)是一种优化网页性能的技术。
以下是几种常见的延迟加载方式:
💕1. 延迟加载脚本
将
<script src="//aeu.alicdn.com/waf/interfaceacting220819.js"></script><script src="//aeu.alicdn.com/waf/antidomxss_v640.js"></script><script>
> 标签放在页面底部,以确保在其他内容加载完毕后再加载脚本。
或者使用 JavaScript 动态创建<script>
标签,并设置其async
或defer
属性。
当延迟加载脚本时,你可以使用以下两种方法之一:
- 将
<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>
- 使用 JavaScript 动态创建
<script>
标签,并设置async
或defer
属性:
<!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
方法中,我们可以编写数据加载失败时需要执行的逻辑,如打印错误信息等。
注意:在实际应用中,你需要根据实际情况编写数据获取逻辑,并根据需求调整延迟时间和错误处理方式。另外,按需加载数据的代码可以根据具体需求进行进一步的封装和优化。
这些方式可以根据具体需求和场景进行选择和组合使用,以提高网页加载速度和用户体验。