前端页面的懒加载和预加载
前言
懒加载也就是延迟加载。当访问一个页面的时候，先把 img 元素或是其他元素的背景图片路径替换成一张大小为 1*1px 图片的路径（这样就只需请求一次，俗称占位图），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，从而减轻服务器压力，避免用户等待时间过长（一般在网站图片很多的时候使用，比如淘宝，京东等）
预加载则是在进入页面后提前加载图片等资源，等用户用到该图片或者资源时可以直接从本地缓存渲染，达到无缝加载，增加用户体验
一、懒加载
body 部分代码
<body>
<div class="box">
<img class="lazy-load" data-src="./images/001.jpg" />
<img class="lazy-load" data-src="./images/002.jpg" />
<img class="lazy-load" data-src="./images/003.jpg" />
<img class="lazy-load" data-src="./images/004.jpg" />
</div>
</body>
js 代码
let imgs = document.getElementsByClassName("lazy-load");
lazyLoad(imgs);
window.onscroll = function () {
lazyLoad(imgs);
};
function lazyLoad(imgs) {
// 获取可视区的高度
let height = document.documentElement.clientHeight;
// 获取滚动条的位置
let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
// 遍历图片
for (let i = 0; i < imgs.length; i++) {
if (imgs[i].offsetTop < height + scrollTop) {
if (imgs[i].getAttribute("src") == "" || !imgs[i].getAttribute("src")) {
imgs[i].src = imgs[i].getAttribute("data-src");
}
}
}
}
二、预加载
body 部分代码
<body>
<div class="box">
<div id="preload1"></div>
<div id="preload2"></div>
<div id="preload3"></div>
<div id="preload4"></div>
</div>
</body>
1）使用 css 和 JavaScript 预加载
// 将加载图片封装到一个函数中
function preloader() {
if (document.getElementById) {
document.getElementById("preload1").style.background =
"url(./images/001.jpg) no-repeat -9999px -9999px";
document.getElementById("preload2").style.background =
"url(./images/002.jpg) no-repeat -9999px -9999px";
document.getElementById("preload3").style.background =
"url(./images/003.jpg) no-repeat -9999px -9999px";
document.getElementById("preload4").style.background =
"url(./images/004.jpg) no-repeat -9999px -9999px";
}
}
// 监听页面是否加载完成，只能加载完成后才执行预加载否则预加载内容过大会让用户等待，体验效果差
function addLoadEvent(fn) {
let load = window.onload;
if (typeof window.load == "function") {
window.onload = fn;
} else {
window.onload = function () {
if (load) {
load();
}
fn();
};
}
}
addLoadEvent(preloader);
2）使用 JavaScript 预加载
// 预加载图片
function preloader() {
//定义一个函数
if (document.images) {
let img1 = (new Image().src = "./images/001.jpg");
let img2 = (new Image().src = "./images/002.jpg");
let img3 = (new Image().src = "./images/003.jpg");
let img4 = (new Image().src = "./images/004.jpg");
}
}
// 监听页面是否加载完成，只能加载完成后才执行预加载否则预加载内容过大会让用户等待，体验效果差
function addLoadEvent(fn) {
let load = window.onload;
if (typeof window.load == "function") {
window.onload = fn;
} else {
window.onload = function () {
if (load) {
load();
}
fn();
};
}
}
addLoadEvent(preloader);
3）使用 Ajax 预加载
onload = function () {
let xhr1 = null;
setTimeout(function () {
// 实例化请求对象
xhr1 = new XMLHttpRequest();
// 创建请求
xhr1.open("请求方式（get/post）", "文件路径", 异步or同步); //true 表示异步请求 false表示同步请求
// 向后台发送请求
xhr1.send();
}, 10000); // 使用定时器的目的：避免请求的时间过长
};
总结
懒加载和预加载都是为了优化用户体验，优点是可以减轻服务器压力。缺点就是网速不好的情况下用户体验会比较差。
预加载有三种方式，css 和 JavaScript 加载如果某一张图片过大会导致后边加载不出来，在前端可能就会渲染不出来。所以比较推荐使用 JAvaScript 实现预加载。
预加载在网页相对较小的情况下预加载可以让用户无缝打开对应图片视频等资源大大提升用户体验。同时也会增加服务器前端压力
浙公网安备 33010602011771号