详细信息
acLazyLoadImage.js 是一个在 jQuery 中实现的响应式、注重性能的图像延迟加载器插件。
当容器滚动到视图中时，插件会自动用原始图像替换占位符。
它还能够处理在多个屏幕分辨率上加载的图像，检测用户的屏幕尺寸并根据视口提供正确的图像。
如何使用它：
1. 将图片插入到以下data属性中：
数据源：原始图像
data-src-small：小屏幕图像
data-src-big：大屏幕图片
<div class="img_lazy"
data-src="original.jpg"
data-src-small="small.jpg"
data-src-big="large.jpg">
</div>2. 在 jQuery 之后插入缩小版的 jQuery acLazyLoadImage.js。
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT"
crossorigin="anonymous">
</script>
<script src="acLazyLoadImage.min.js"></script>3.调用DIV容器上的插件。就是这样。
$( document ).ready(function() {
$( ".img_lazy" ).ImgLazyLoad();
});4. 为响应式图像传送指定断点。
$( ".img_lazy" ).ImgLazyLoad({
mobile: 640,
qhd: 1680
});5. 指定浏览器开始加载原始图像的顶部偏移量。
$( ".img_lazy" ).ImgLazyLoad({
offset: -150
});6. 确定插件检查可见性的频率。
$( ".img_lazy" ).ImgLazyLoad({
time: 200
});
发表评论
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。