目录
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>
若文章对你有帮助,点个赞吧!