图片预加载与懒加载
由名字可以知道,图片的预加载->当用户需要查看图片可以直接从本地缓存中取到(提前加载下来的),图片的懒加载->是当用户一次性访问的图片数量比较多的时候,会减少请求的次数或者延迟请求,是一种服务器前端的优化
总结来说:图片的预加载在一定程度上加强了服务器的压力,图片的懒加载在一定程度上减轻了服务器的压力
预加载
就是在我们需要使用到图片资源的地方之前就先把这些图片资源加载下来,这样在我们使用的地方就会直接从本地缓存中去取
实现方式1 : 可以直接在使用之前报所以资源加载下来这样就会缓解当在需要使用的地方所有资源加载太慢而出现的副作用
//css
.image {
width: 100vw;
height: 100vh;
background: url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-1.jpg"),
url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-1_1.jpg"),
url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-2_1.jpg"),
url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-4_1.jpg"),
url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-5_1.jpg"),
url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-1_1.jpg");
background-size: cover;
opacity: 1;
animation: bgmove 10s infinite;
overflow: hidden;实现方式2 : 可以使用image 对象,每创建一个image对象的时候就给浏览器缓存了一张图片,在需要使用的极速加载
//js
<script>
var arr = [
"https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-1_1.jpg",
"https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-2_1.jpg",
"https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-4_1.jpg",
"https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-5_1.jpg",
];
var imgs = []
preLoadImg(arr);
//图片预加载方法
function preLoadImg(pars) {
for (let i = 0; i < arr.length; i++) {
imgs[i] = new Image();
imgs[i].src = arr[i];
}
}
</script>补充一个小问题:当我们创建var imageobj = new image()image 对象,直接给对象src赋值,可以追加到页面图片可以显示,但是当我们打印image对象的宽高时显示都是为0的,那时因为即使图片已经经过了预加载但是图片的加载速度还是会慢于html的加载速度,所以解决办法就是使用onload方法,在图片已经完全加载完成之后再打印,这样就可以取到图片的宽高了.
懒加载
自定义一个属性存放img的真实地址,在img 的src属性存放一个占位的图片地址(小图或者是图片加载的动图),当img出现在浏览器的可视区域时再将真实的图片地址赋值给img的src属性,减轻服务器端的压力
Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
img {
margin-top: 1000px;
}
</style>
</head>
<body>
<div class="container">
<img id="img1" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2167624966,4016886940&fm=26&gp=0.jpg"
data-src="https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-4_1.jpg" alt="">
</div>
</body>
</html>
<script>
var viewPortHeight = window.innerHeight;
let $img1 = document.getElementById('img1');
//获取元素顶部是否出现在浏览器可视区域内,
function viewport(el) {
//下面两种算法的结果是一样的,
return el.offsetTop - document.documentElement.scrollTop+200 <= viewPortHeight;
//return el.getBoundingClientRect().top - document.documentElement.scrollTop+200 <= viewPortHeight;
}
window.onscroll = function(){
//如果图片出现在页面的可视区域,就替换真实的图片
if(viewport($img1)){
console.log('图片出现在页面中');
//也可以在这里添加图片加载的动画
$img1.src = $img1.getAttribute("data-src");
}else{
console.log('图片没有出现');
}
}
</script>判断元素是否出现在页面的可视区域的优化
使用懒加载的方式主要是缓解服务器的压力,但是因为使用了scroll方法,计算量较大,会造成性能问题
),现在有一个新的API IntersectionObserver
),可以自动监测元素是否在页面中可见,这个API也叫做"交叉观察器",就是目标元素与视口产生的一个交叉区.
主要使用场景 : 懒加载 + 无限滚动(后面单独介绍)
1.懒加载
<style>
#full {
height: 1200px;
background-color: #f22;
}
#test {
height: 300px;
}
.addclass {
background-color: #3f3;
}
#last {
height: 100px;
width: 100vw;
background-color: pink;
}
</style>
<body>
<div id="full"></div>
<div id="test"></div>
<div id="last"></div>
<script>
var test = document.getElementById('test');
var last= document.getElementById('last');
var io = new IntersectionObserver((entries) => {
//entries是一个数组，数组中的每一个元素都是IntersectionObserverEntry对象
console.log('entries: ', entries);
if(entries[0].isIntersecting ){
test.className = 'addclass'
}
})
io.observe(test); //开启检测需要指定元素
io.observe(last);
</script>
</body>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。