目录
一.懒加载
懒加载就是延迟加载。当访问一个页面时,先把img元素或是其他元素的背景图片路径替换成一张大小为1*1图片的路径(这样就只需要请求一次,俗称占位图),只有当图片出现在浏览器中的可视区域内时,才设置图片真正路径,让图片显示出来,这就是图片的懒加载
1.1使用场景
当网站的图片比较大时,基于网站性能和用户体验考虑,这时需要用到懒加载。
1.2原理
初始时,img中的src不赋值(或者赋以一个占位图片),而是将真正的图片地址存在用户自定义属性data-src,当鼠标滚动到可视区时,这时用data-src中的值替换src中的值。
1.3 懒加载的优点
页面加载速度快,可以减轻服务器的压力,节约了流量用户体验好
1.4 图片懒加载的实现(可视化加载)
function lazyload(imgs) {
// 获取屏幕的高度
var height=document.documentElement.clientHeight;
// 获取滚轮的位置
var scrollTop=document.documentElement.scrollTop;
// 遍历图片(根据其高度判断其显示状态)
for (let n = 0; n < imgs.length; n++) {
// 某图片离顶部位置<页面高度+滚轮位置(已用空间)
if (imgs[n].offsetTop<height+scrollTop) {
if (!imgs[n].getAttribute('src')) {
imgs[n].setAttribute('src',imgs[n].getAttribute('data-src'));
// n=n+1
}
}
}
}
二.预加载
提前加载图片,当用户需要查看时可以直接从本地缓存中渲染
2.1 使用预加载的原因
保证图片快速、无缝的发布,增加用户体验
2.2 实现预加载的方法
2.2.1 用CSS和JavaScript实现预加载
单纯使用CSS,可容易、高效地预加载图片。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#preload1 {background: url(img/tu1.jpg) no-repeat -9999px -9999px;}
#preload2 {background: url(img/tu2.jpg) no-repeat -9999px -9999px;}
#preload3 {background: url(img/tu3.jpg) no-repeat -9999px -9999px;}
</style>
</head>
<body>
<div id="preload1"></div>
<div id="preload2"></div>
<div id="preload3"></div>
<img src="file:///F:/WebCode/basics/Phase2/day2_Javascript%E4%BC%98%E5%8C%96/img/tu1.jpg" alt="" srcset="">
</body>
这种方法的思路是通过css去加载所需要的图片,但是通过背景位置的调整到页面之外的部分,可是图片 还是被浏览器缓存了。之后再页面的其他地方我们还是可以直接使用,从缓存中读取。此方法会出现一种情况,如果这个CSS代码在加载的时候读取到需要加载背景图,正好 背景图又比较大,这样整个页面的耗时比较厉害。
我们最好是等到页面加载完成之后再去加载需要预加载的图。那 这个时候,我们使用JS来进行加载还是比较友好的。代码如下:
// 加载图片操作
function preloader() {
if (document.getElementById) {
document.getElementById('preload1').style.background = 'url(img/tu1.jpg) no-repeat -9999px -9999px';
document.getElementById('preload2').style.background = 'url(img/tu2.jpg) no-repeat -9999px -9999px';
document.getElementById('preload3').style.background = 'url(img/tu3.jpg) no-repeat -9999px -9999px';
}
}
// 监听页面加载是否完成,若完成则预加载
function addloadEvent(func) {
document.onreadystatechange = function () {
if (document.readyState == "complete") {
func();
}
}
}
addloadEvent(preloader);
2.2.2仅使用JavaScript实现预加载
该方法尤其适用预加载大量的图片。
// 加载图片操作
function preloader() {
if (document.images) {
var img1=new Image();
var img2=new Image();
var img3=new Image();
img1.src='img/tu1.jpg'
img2.src='img/tu2.jpg'
img3.src='img/tu3.jpg'
}
}
// 监听页面加载是否完成,若完成则预加载
function addloadEvent(func) {
document.onreadystatechange = function () {//即在加载的过程中执行下面的代码
if (document.readyState == "complete") {//complete加载完成
func();
}
}
}
console.log(document.images);
addloadEvent(preloader);
2.2.3 使用ajax实现预加载
使用Ajax实现图片预加载的方法利于DOM,不仅可以加载图片还可以加载CSS、JS等。
使用Ajax的优越之处在于JavaScript和css的加载不会影响到当前页面。
window.onload = function () {
setTimeout(() => {
var xhr2 = new XMLHttpRequest();
xhr2.open('get', 'https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js');
xhr2.send('');
var xhr3 = new XMLHttpRequest();
xhr3.open('get', 'https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.20/lodash.core.js');
xhr3.send('');
new Image().src = "https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3097653549,3802607912&fm=15&gp=0.jpg";
xhr2.onreadystatechange=function(){
if(xhr2.status==200&&xhr2.readyState==4){
console.log(xhr2.responseText);
}
}
}, 1000);
}
三.懒加载和预加载对比
区别:两者的行为是相反的,一个是提前加载,一个是迟缓甚至不加载。懒加载对于服务器有一定的缓解压力的作用,预加载则会对服务器增加压力
懒加载的实现方式:
- 纯粹的延迟加载,使用settmeout或者setInterval进行加载延迟
- 条件加载,满足某一条件,或者触发了某些事件才开始异步加载
- 可视区加载,加载用户可以看到的区域
预加载的实现方式:
- 用CSS和JavaScript实现预加载;
- 仅使用JavaScript实现预加载;
- 使 用Ajax实现预加载。