图片懒加载
优先加载可视区域的内容，等图片进入了可视区域再加载，从而提高性能。
- 原理：
给图片的img标签中的src属性初始时，置空，一般将真正的链接地址写入一个自定义的属性data-src中；当图片进入可视区域后，再将data-src中的地址给src赋值 - 实现：
判断可视区域+滚动距离 > 图片到可视区域顶部距离，如果大于，代表图片在可视区域范围，这时加载图片
在整个页面中滚动的实现
<!-- 相对于整个页面滚动 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.other-content {
height: 500px;
background: yellow;
}
.img-container {
width: 300px;
}
.img {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div class="other-content"></div>
<div class="img-container">
<img class="img" src="" data-src="https://alifei01.cfp.cn/creative/vcg/veer/800water/veer-134642240.jpg">
<img class="img" src="" data-src="https://alifei04.cfp.cn/creative/vcg/veer/800water/veer-142043813.jpg">
<img class="img" src="" data-src="https://tenfei04.cfp.cn/creative/vcg/veer/800water/veer-150448228.jpg">
<img class="img" src="" data-src="https://alifei04.cfp.cn/creative/vcg/veer/800water/veer-140960753.jpg">
<img class="img" src="" data-src="https://alifei05.cfp.cn/creative/vcg/veer/800water/veer-150630194.jpg">
<img class="img" src="" data-src="https://alifei03.cfp.cn/creative/vcg/veer/800water/veer-164428632.jpg">
<img class="img" src="" data-src="https://alifei04.cfp.cn/creative/vcg/veer/800water/veer-170923883.jpg">
<img class="img" src="" data-src="https://alifei01.cfp.cn/creative/vcg/veer/800water/veer-305149820.jpg">
<img class="img" src="" data-src="https://alifei03.cfp.cn/creative/vcg/veer/800water/veer-121508242.jpg">
<img class="img" src="" data-src="https://alifei02.cfp.cn/creative/vcg/veer/800water/veer-154371821.jpg">
<img class="img" src="" data-src="https://tenfei04.cfp.cn/creative/vcg/veer/800water/veer-132362258.jpg">
<img class="img" src="" data-src="https://alifei05.cfp.cn/creative/vcg/veer/800water/veer-312350154.jpg">
</div>
<script>
// 整个body窗口的大小
const innerWidth = window.innerWidth // 当前可视区域的宽度
const innerHeight = window.innerHeight // 所有body内容的高
console.log("inner:", innerWidth, innerHeight)
// html元素或者body上的滚动距离
const scrollLeft = document.documentElement.scrollLeft ||document.body.scrollLeft
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
// 初始加载
window.onload = function() {
var imgs = document.querySelectorAll('img');
// 因为不单单滚动时，要计算图片是否可视；初始时，有些图片可能就在可视范围内，所以初始时也要调用这个方法
// 所以单独封装懒加载方法
function lazyLoad(imgs) {
// 可视区域的高度
const innerHeight = window.innerHeight
// 滚动的高度
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
for(let i = 0; i < imgs.length; i++) {
// offsetTop为图片相对于顶部的距离
// 当可视区域高度 + 滚动高度 > 图片到顶部的距离时，说明图片已经在可视区域中
if(innerHeight + scrollTop > imgs[i].offsetTop) {
let temp = new Image() // 临时创建一个图片对象，这是在内存中创建的，不会显示在页面上
temp.src = imgs[i].getAttribute('data-src'); // 在图片对象上获取图片真实请求路径，进行加载，这个只会请求一次
console.log(111, imgs[i].offsetTop)
// 当图片加载完成后，将地址替换到真实页面可视区域上图片的src
temp.onload = function() {
// 将真实图片替换
imgs[i].src = temp.src
}
}
}
}
// 初始时调用懒加载，保证在可视区域范围的图片正常加载
lazyLoad(imgs)
// 滚动时调用懒加载
window.addEventListener("scroll", function() {
lazyLoad(imgs)
})
}
</script>
</body>
</html>
-
效果
可以看到初始时，只加载可视的两张，当滚动到下面时，加载对应的图片，仅来回滚动也仅会加载一次
初始只加载两张
image.png
在某个容器中的懒加载实现
与页面差别在于：
- 可视区域由浏览器可视区域，可视区域变成图片容器的高度
window.getComputedStyle(imgContainer).height - 图片距离浏览器的顶部，改为到图片容器的顶部距离，即
img.offsetTop - imgContainer.offsetTop - 监听滚动的对象，由
window变为imgContainer
<!-- 相对于图片容器滚动 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.other-content {
height: 100px;
background: yellow;
}
.img-container {
width: 300px;
height: 600px;
overflow-y: auto;
overflow-x: hidden;
}
.img {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div class="other-content"></div>
<div class="img-container">
<img class="img" src="" data-src="https://alifei01.cfp.cn/creative/vcg/veer/800water/veer-134642240.jpg">
<img class="img" src="" data-src="https://alifei04.cfp.cn/creative/vcg/veer/800water/veer-142043813.jpg">
<img class="img" src="" data-src="https://tenfei04.cfp.cn/creative/vcg/veer/800water/veer-150448228.jpg">
<img class="img" src="" data-src="https://alifei04.cfp.cn/creative/vcg/veer/800water/veer-140960753.jpg">
<img class="img" src="" data-src="https://alifei05.cfp.cn/creative/vcg/veer/800water/veer-150630194.jpg">
<img class="img" src="" data-src="https://alifei03.cfp.cn/creative/vcg/veer/800water/veer-164428632.jpg">
<img class="img" src="" data-src="https://alifei04.cfp.cn/creative/vcg/veer/800water/veer-170923883.jpg">
<img class="img" src="" data-src="https://alifei01.cfp.cn/creative/vcg/veer/800water/veer-305149820.jpg">
<img class="img" src="" data-src="https://alifei03.cfp.cn/creative/vcg/veer/800water/veer-121508242.jpg">
<img class="img" src="" data-src="https://alifei02.cfp.cn/creative/vcg/veer/800water/veer-154371821.jpg">
<img class="img" src="" data-src="https://tenfei04.cfp.cn/creative/vcg/veer/800water/veer-132362258.jpg">
<img class="img" src="" data-src="https://alifei05.cfp.cn/creative/vcg/veer/800water/veer-312350154.jpg">
</div>
<script>
// 初始加载
window.onload = function() {
// 图片容器对象
let imgContainer = document.querySelector('.img-container')
// 所有图片对象
var imgs = document.querySelectorAll('img');
// 因为不单单滚动时，要计算图片是否可视；初始时，有些图片可能就在可视范围内，所以初始时也要调用这个方法
// 所以单独封装懒加载方法
function lazyLoad(imgs) {
// 容器可视区域的高度
let innerHeight = window.getComputedStyle(imgContainer).height // 600px
innerHeight = parseInt(innerHeight) // 600
let imgContainerOffsetTop = imgContainer.offsetTop // 图片容器自身距离页面的高度
// 容器内滚动的高度
const scrollTop = imgContainer.scrollTop
for(let i = 0; i < imgs.length; i++) {
// offsetTop为图片相对于浏览器顶部的距离，要求相对于容器顶部的距离，需要用 imgs[i].offsetTop - imgContainerOffsetTop
// 容器当可视区域高度 + 滚动高度 > 图片到顶部的距离时，说明图片已经在可视区域中
if(innerHeight + scrollTop > imgs[i].offsetTop - imgContainerOffsetTop) {
let temp = new Image() // 临时创建一个图片对象，这是在内存中创建的，不会显示在页面上
temp.src = imgs[i].getAttribute('data-src'); // 在图片对象上获取图片真实请求路径，进行加载，这个只会请求一次
// 当图片加载完成后，将地址替换到真实页面可视区域上图片的src
temp.onload = function() {
// 将真实图片替换
imgs[i].src = temp.src
}
}
}
}
// 初始时调用懒加载，保证在可视区域范围的图片正常加载
lazyLoad(imgs)
// 滚动时调用懒加载
imgContainer.addEventListener("scroll", function() {
lazyLoad(imgs)
})
}
</script>
</body>
</html>
image.png
image.png
- 延伸
这个懒加载的实现的原理，其实也可以用来应对CDN加载资源错误问题，比如在src中先设置好常用的CDN地址，自定义一个属性写上备用的CDN地址，比如backup-src，当监听到图片加载异常时，使用备用的CDN地址替换src地址
<!-- 为了试验，写一个不存在的地址 -->
<img class="backup-cdn" src="http://www.xxxx.com/xxx.jpg" backup-src="https://alifei05.cfp.cn/creative/vcg/veer/800water/veer-312350154.jpg" alt="">
<script>
let backupImg = document.querySelector('.backup-cdn')
backupImg.onerror = function() {
let backupSrc = backupImg.getAttribute('backup-src')
backupImg.src = backupSrc
}
</script>
图片加载异常处理
图片预加载
比如为幻灯片、相册等，可以将当前展示图片的前一张和后一张优先下载
实现预加载的方式，可以使用css的background，js的image
- css
.img {
background-image: url(image.jpg);
}
- js
其实就是我们刚刚实现懒加载，也使用了图片预加载，这里不再赘述
1 使用new Image()动态的创建img
2 设置其src为要加载的图片，来实现预载。
3 使用onload方法回调预载完成事件（也就是当预载完成之后，执行想要的操作）
使用雪碧图
使用csssprite和svgsprite，原理大致是：将多张小图片合成一个大图，然后使用background-position来指定展示哪张图
在实际项目中，我们经常借助打包工具加载第三方插件来实现这个功能，可以参考：vue使用svg-sprite-loader实现svgsprite
改变图片大小
- 图片裁剪
裁剪多余空白，以此来减小图片大小 - 图片压缩
如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验
使用base64格式图片
参考：
https://blog.csdn.net/w1418899532/article/details/90515969
网友评论