高性能图像延迟加载器 - acLazyLoadImage.js

高性能图像延迟加载器 - acLazyLoadImage.js

版本:

浏览量:1144

最后更新:2021-09-12

应用标签:Jquery插件MAC 软件git

推荐指数:

详细信息

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
});
联系我们
免费复制
微信扫码关注领取验证码
注:需在公众号回复"验证码
输入验证码后可免费复制
付费复制 免费复制 付费复制
付费后30天内不限量复制

价格:元

支付宝支付
联系客服
扫一扫,支付¥

正在加载二维码...

支付完成后,请等待10秒左右,请勿关闭此页

发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。