1.原理
当页面图片比较多的时候,加载速度会比较慢,所以为了增加页面加载速度,先将可视区域内的图片加载,其他区域的图片暂不加载,等到滚动到可视区域内,再去加载图片,会缓解一部分服务器的压力,提升性能.
2.实现步骤
-
将页面中的img标签的src指向占位图片(小图片),然后自定义data-src属性,指向真实引入的图片.
<img src="placeholder.png" data-src="https://img01.jhcms.com/wmdemo/photo/201707/20170727_CC1C74F71145C7D4FBEA447FE89DDD7C.jpg"> -
先将可视区域内的图片的src替换成data-src内的值
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 } } } -
然后监听滚动事件,把即将出现在可视区域内的图片加载出来.
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>
网友评论