1.原理
當(dāng)頁面圖片比較多的時候,加載速度會比較慢,所以為了增加頁面加載速度,先將可視區(qū)域內(nèi)的圖片加載,其他區(qū)域的圖片暫不加載,等到滾動到可視區(qū)域內(nèi),再去加載圖片,會緩解一部分服務(wù)器的壓力,提升性能.
2.實現(xiàn)步驟
-
將頁面中的img標(biāo)簽的src指向占位圖片(小圖片),然后自定義data-src屬性,指向真實引入的圖片.
<img src="placeholder.png" data-src="https://img01.jhcms.com/wmdemo/photo/201707/20170727_CC1C74F71145C7D4FBEA447FE89DDD7C.jpg"> -
先將可視區(qū)域內(nèi)的圖片的src替換成data-src內(nèi)的值
var img= document.getElementsByTagName('img'), len = img.length, n = 0; function lazypic(){ var visibleHeight = document.documentElement.clientHeight, scrollTop = document.documentElement.scrollTop || document.body.scrollTop; for(let i = n;i<len;i++){ if(img[i].offsetTop < visibleHeight + scrollTop){ if(img[i].getAttribute('src') == 'placeholder.png'){ img[i].src = img[i].getAttribute('data-src') } n = i + 1 } } } -
然后監(jiān)聽滾動事件,把即將出現(xiàn)在可視區(qū)域內(nèi)的圖片加載出來.
window.onscroll = lazypic;
3.代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<style>
img {
display: block;
margin-bottom: 50px;
}
</style>
</head>
<body>
<img src="placeholder.png" data-src="https://img01.jhcms.com/wmdemo/photo/201707/20170727_CC1C74F71145C7D4FBEA447FE89DDD7C.jpg">
<img src="placeholder.png" data-src="https://img01.jhcms.com/demo/photo/201801/20180129_CA90F1C619019CE324AAE33479EEBA58.png" alt="">
<img src="placeholder.png" data-src="https://img01.jhcms.com/demo/photo/201711/20171103_B328846ADC0A115B3C450F4C76160572.png" alt="">
<img src="placeholder.png" data-src="https://img01.jhcms.com/wmdemo/photo/201707/20170727_CC1C74F71145C7D4FBEA447FE89DDD7C.jpg">
<img src="placeholder.png" data-src="https://img01.jhcms.com/demo/photo/201801/20180129_CA90F1C619019CE324AAE33479EEBA58.png" alt="">
<img src="placeholder.png" data-src="https://img01.jhcms.com/demo/photo/201711/20171103_B328846ADC0A115B3C450F4C76160572.png" alt="">
<img src="placeholder.png" data-src="https://img01.jhcms.com/wmdemo/photo/201707/20170727_CC1C74F71145C7D4FBEA447FE89DDD7C.jpg">
<img src="placeholder.png" data-src="https://img01.jhcms.com/demo/photo/201801/20180129_CA90F1C619019CE324AAE33479EEBA58.png" alt="">
<img src="placeholder.png" data-src="https://img01.jhcms.com/demo/photo/201711/20171103_B328846ADC0A115B3C450F4C76160572.png" alt="">
<img src="placeholder.png" data-src="https://img01.jhcms.com/wmdemo/photo/201707/20170727_CC1C74F71145C7D4FBEA447FE89DDD7C.jpg">
<img src="placeholder.png" data-src="https://img01.jhcms.com/demo/photo/201801/20180129_CA90F1C619019CE324AAE33479EEBA58.png" alt="">
<img src="placeholder.png" data-src="https://img01.jhcms.com/demo/photo/201711/20171103_B328846ADC0A115B3C450F4C76160572.png" alt="">
</body>
<script>
var img= document.getElementsByTagName('img'),
len = img.length,
n = 0;
lazypic();
window.onscroll = lazypic;
function lazypic(){
var visibleHeight = document.documentElement.clientHeight,
scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
for(let i = n;i<len;i++){
if(img[i].offsetTop < visibleHeight + scrollTop){
if(img[i].getAttribute('src') == 'placeholder.png'){
img[i].src = img[i].getAttribute('data-src')
}
n = i + 1
}
}
}
</script>
</html>