前端-懒加载
目录
1.懒加载的概念
2.懒加载的特点
3.懒加载的实现原理
4.懒加载与预加载的区别
5.懒加载实现
6.预加载实现
1.懒加载的概念
懒加载也加延迟加载、按需加载，指在长网页中延迟加载图片数据，是一种较好的网页性能优化的方式。
2.懒加载的特点
（1）减少了无用资源的加载
（2）提升用户体验
（3）防止加载过多图片而影响其他资源文件的加载
3.懒加载的实现原理
图片的加载是由src引起的，当对src赋值时，浏览器就会请求图片资源。
根据这个原理，我们使用HTML5的data-src属性来存储图片的路径，在需要加载图片时，将data-src中的图片路径赋值给src，这样样思想按需加载，即懒加载。
实现原理：
window.innerHeight是浏览器可视区的高度
document.body.scrollTop || document.documentElement.scrollTop是浏览器滚动过的距离
imgs.offsetTop是元素顶部距离文档顶部的高度（包括了滚动条的距离）
图片加载条件：imgs.offsetTop<window.innerHeight+document.body.scrollTop
4.懒加载与预加载的区别
两者都是提升网页性能的方式，主要区别是一个迟缓甚至不加载，一个是提前加载。
懒加载是延迟加载，指的是在长网页中当用户需要去访问时，再去加载。
预加载指的是将所需的资源提前请求加载到本地，后面需要用时直接从缓存中取资源。
| 懒加载 | 预加载 | |
|---|---|---|
| 加载时机 | 用户需要时（如滚动到页面某个位置） | 页面加载过程中或加载完成前 |
| 目的 | 减少初始加载时间，提高页面加载速度，缓解服务器前端压力 | 加快页面内容的呈现速度，提升页面切换速度和流畅度 |
| 应用场景 | 长滚动页面、资源密集型网站 | 关键资源加载、预测用户行为 |
| 对服务器压力 | 减轻 | 增加（但换取更好的用户体验） |
5.懒加载实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片性能优化——懒加载</title>
<style>
*{
margin: 0;
padding: 0;
}
.container {
width: 100%;
height: 9000px;
background-color: antiquewhite;
}
</style>
</head>
<body>
<!-- 图片加载条件：imgs.offsetTop<window.innerHeight+document.body.scrollTop -->
<div class="container">
<img src="loading.gif" data-src="./images/01.jpg">
<img src="loading.gif" data-src="./images/02.jpg">
<img src="loading.gif" data-src="./images/03.jpg">
<img src="loading.gif" data-src="./images/04.jpg">
<img src="loading.gif" data-src="./images/05.jpg">
<img src="loading.gif" data-src="./images/06.jpg">
<img src="loading.gif" data-src="./images/lanrenzhijia1.jpg">
<img src="loading.gif" data-src="./images/lanrenzhijia2.jpg">
<img src="loading.gif" data-src="./images/lanrenzhijia3.jpg">
<img src="loading.gif" data-src="./images/lanrenzhijia4.jpg">
<img src="loading.gif" data-src="./images/lanrenzhijia5.jpg">
<img src="loading.gif" data-src="./images/lanrenzhijia6.jpg">
</div>
<script>
console.log("浏览器可视区的高度",window.innerHeight);
console.log("浏览器滚动过的距离",document.body.scrollTop,document.documentElement.scrollTop);
let imgs=document.querySelectorAll("img");
function lazyLoad(){
let scrollTop=document.body.scrollTop||document.documentElement.scrollTop; //浏览器滚动过的距离
let winHeight=window.innerHeight;
for(let i=0;i<imgs.length;i++){
if(imgs[i].offsetTop<scrollTop+winHeight){
imgs[i].src=imgs[i].getAttribute("data-src");
console.log(imgs[i].offsetTop,scrollTop,winHeight);
console.log(`第${i}张图片出来了`);
}
}
}
window.onscroll=lazyLoad;
</script>
</body>
</html>6.预加载实现
在HTML文档的<head>部分或<body>的底部（确保在DOM元素之前或之后），我们可以使用JavaScript来创建新的Image对象，并设置它们的src属性为要预加载的图片URL。浏览器就会在页面加载过程中提前下载这些图片。
<script>
function preloadImages(urls) {
if (!preloadImages.list) {
preloadImages.list = [];
}
for (var i = 0; i < urls.length; i++) {
var img = new Image();
img.onload = function() {
var index = preloadImages.list.indexOf(this);
if (index !== -1) {
// 可选：加载完成后的回调处理
console.log('Image ' + (index + 1) + ' loaded');
// 移除已加载的图片引用，避免内存泄漏（可选）
preloadImages.list.splice(index, 1);
}
};
img.onerror = function() {
console.error('Failed to load image ' + this.src);
};
preloadImages.list.push(img);
img.src = urls[i];
}
}
// 调用预加载函数，传入图片URL数组
preloadImages(['img1.jpg', 'img2.jpg', 'img3.jpg', 'img4.jpg']);
</script>若文章对你有帮助，点个赞吧！