圖片預(yù)加載與懶加載
由名字可以知道,
圖片的預(yù)加載->當(dāng)用戶需要查看圖片可以直接從本地緩存中取到(提前加載下來的),圖片的懶加載->是當(dāng)用戶一次性訪問的圖片數(shù)量比較多的時(shí)候,會減少請求的次數(shù)或者延遲請求,是一種服務(wù)器前端的優(yōu)化
總結(jié)來說:圖片的預(yù)加載在一定程度上加強(qiáng)了服務(wù)器的壓力,圖片的懶加載在一定程度上減輕了服務(wù)器的壓力
預(yù)加載
就是在我們需要使用到圖片資源的地方之前就先把這些圖片資源加載下來,這樣在我們使用的地方就會直接從本地緩存中去取
實(shí)現(xiàn)方式1 : 可以直接在使用之前報(bào)所以資源加載下來這樣就會緩解當(dāng)在需要使用的地方所有資源加載太慢而出現(xiàn)的副作用
//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;
實(shí)現(xiàn)方式2 : 可以使用image 對象,每創(chuàng)建一個(gè)image對象的時(shí)候就給瀏覽器緩存了一張圖片,在需要使用的極速加載
//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);
//圖片預(yù)加載方法
function preLoadImg(pars) {
for (let i = 0; i < arr.length; i++) {
imgs[i] = new Image();
imgs[i].src = arr[i];
}
}
</script>
補(bǔ)充一個(gè)小問題:當(dāng)我們創(chuàng)建
var imageobj = new image()image 對象,直接給對象src賦值,可以追加到頁面圖片可以顯示,但是當(dāng)我們打印image對象的寬高時(shí)顯示都是為0的,那時(shí)因?yàn)榧词箞D片已經(jīng)經(jīng)過了預(yù)加載但是圖片的加載速度還是會慢于html的加載速度,所以解決辦法就是使用onload方法,在圖片已經(jīng)完全加載完成之后再打印,這樣就可以取到圖片的寬高了.
懶加載
自定義一個(gè)屬性存放img的真實(shí)地址,在img 的src屬性存放一個(gè)占位的圖片地址(小圖或者是圖片加載的動圖),當(dāng)img出現(xiàn)在瀏覽器的可視區(qū)域時(shí)再將真實(shí)的圖片地址賦值給img的src屬性,減輕服務(wù)器端的壓力 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(){
//如果圖片出現(xiàn)在頁面的可視區(qū)域,就替換真實(shí)的圖片
if(viewport($img1)){
console.log('圖片出現(xiàn)在頁面中');
//也可以在這里添加圖片加載的動畫
$img1.src = $img1.getAttribute("data-src");
}else{
console.log('圖片沒有出現(xiàn)');
}
}
</script>
判斷元素是否出現(xiàn)在頁面的可視區(qū)域的優(yōu)化
使用懶加載的方式主要是緩解服務(wù)器的壓力,但是因?yàn)槭褂昧藄croll方法,計(jì)算量較大,會造成性能問題,現(xiàn)在有一個(gè)新的API IntersectionObserver,可以自動監(jiān)測元素是否在頁面中可見,這個(gè)API也叫做"交叉觀察器",就是目標(biāo)元素與視口產(chǎn)生的一個(gè)交叉區(qū).
主要使用場景 : 懶加載 + 無限滾動(后面單獨(dú)介紹)
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是一個(gè)數(shù)組探越，數(shù)組中的每一個(gè)元素都是IntersectionObserverEntry對象
console.log('entries: ', entries);
if(entries[0].isIntersecting ){
test.className = 'addclass'
}
})
io.observe(test); //開啟檢測需要指定元素
io.observe(last);
</script>
</body>
