JavaScript实现页面滚动图片加载(仿lazyload效果)
概述
在网站中,经常会有长页式的页面,滚动页面时会不断加载图片,但是如果在页面的初次加载时一次性加载所有的图片,会给用户带来不必要的流量浪费,同时也会影响页面加载速度。因此,我们可以通过JavaScript实现页面滚动图片加载,去实现对用户体验的优化。
本攻略将介绍一种基于lazyload思路的实现方法,让图片在页面滚动时才进行加载,并且只加载当前可视区域内的图片,这样就可以避免因网页中大量的图片导致的性能问题。
实现方式
- 为图片设置占位符
- 获取浏览器窗口的高度,计算当前可视区域内的图片
- 监听window的scroll事件,滚动时计算出当前可视区域内的图片,等待图片完成加载
- 加载完成后将其插入页面,用占位符替换掉
示例说明
示例1:使用jQuery实现
HTML代码:
<div class="container">
<div class="image">
<img src="placeholder.png" data-src="image1.jpg" alt="">
</div>
<div class="image">
<img src="placeholder.png" data-src="image2.jpg" alt="">
</div>
<div class="image">
<img src="placeholder.png" data-src="image3.jpg" alt="">
</div>
<div class="image">
<img src="placeholder.png" data-src="image4.jpg" alt="">
</div>
<div class="image">
<img src="placeholder.png" data-src="image5.jpg" alt="">
</div>
<div class="image">
<img src="placeholder.png" data-src="image6.jpg" alt="">
</div>
<div class="image">
<img src="placeholder.png" data-src="image7.jpg" alt="">
</div>
<div class="image">
<img src="placeholder.png" data-src="image8.jpg" alt="">
</div>
<div class="image">
<img src="placeholder.png" data-src="image9.jpg" alt="">
</div>
<div class="image">
<img src="placeholder.png" data-src="image10.jpg" alt="">
</div>
</div>
JavaScript代码:
$(function() {
$(window).on('scroll', function() {
$('.image').each(function(index) {
if(!$(this).data('loaded') && inViewport(this)) {
var $img = $(this).find('img');
$img.attr('src', $img.data('src'))
.on('load', function() {
$(this).parent().removeClass('loading');
});
$(this).data('loaded', true);
$(this).addClass('loading');
}
});
});
function inViewport(element) {
var rect = element.getBoundingClientRect();
return (
rect.bottom >= 0 &&
rect.right >= 0 &&
rect.top <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.left <= (window.innerWidth || document.documentElement.clientWidth)
);
}
});
在这个示例中,我们为每个图片设置了一个占位符,使用data-src属性来存储真实图片的地址。当滚动到图片所在的可视区域内时,将占位符替换成真实的图片,并为其添加一个loading的class。
示例2:使用原生JavaScript实现
HTML代码:
<div class="container">
<div class="image">
<img src="placeholder.png" data-src="image1.jpg" alt="">
</div>
<div class="image">
<img src="placeholder.png" data-src="image2.jpg" alt="">
</div>
<div class="image">
<img src="placeholder.png" data-src="image3.jpg" alt="">
</div>
<div class="image">
<img src="placeholder.png" data-src="image4.jpg" alt="">
</div>
<div class="image">
<img src="placeholder.png" data-src="image5.jpg" alt="">
</div>
<div class="image">
<img src="placeholder.png" data-src="image6.jpg" alt="">
</div>
<div class="image">
<img src="placeholder.png" data-src="image7.jpg" alt="">
</div>
<div class="image">
<img src="placeholder.png" data-src="image8.jpg" alt="">
</div>
<div class="image">
<img src="placeholder.png" data-src="image9.jpg" alt="">
</div>
<div class="image">
<img src="placeholder.png" data-src="image10.jpg" alt="">
</div>
</div>
JavaScript代码:
window.addEventListener('scroll', function() {
document.querySelectorAll('.image:not(.loading)').forEach(function(element) {
if(inViewport(element)) {
var img = element.querySelector('img');
img.src = img.dataset.src;
element.classList.add('loading');
img.addEventListener('load', function() {
element.classList.remove('loading');
});
}
});
});
function inViewport(element) {
var rect = element.getBoundingClientRect();
return (
rect.bottom >= 0 &&
rect.right >= 0 &&
rect.top <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.left <= (window.innerWidth || document.documentElement.clientWidth)
);
}
在这个示例中,我们也为每个图片设置了一个占位符,使用data-src属性来存储真实图片的地址。当滚动到图片所在的可视区域内时,将占位符替换成真实的图片,并为其添加一个loading的class。
总结
通过本攻略的实现方式,我们可以方便地实现页面的滚动图片加载,不仅能够提升用户体验,同时也能够减少页面加载时间和流量消耗。以上就是基于lazyload思路的图片懒加载方案,相信对于想要实现此功能的读者能够有所帮助。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JavaScript实现页面滚动图片加载(仿lazyload效果) - Python技术站