BttrLazyLoading 基于 jQuery 响应式懒加载插件 - 文章教程

BttrLazyLoading 基于 jQuery 响应式懒加载插件

发布于 2020-05-01 字数 5318 浏览 1529 评论 0

ttrLazyLoading 是一款 jQuery 响应式图像延迟加载的插件,允许用户在WEB页面滚动至图像位置时延迟加载图片。BttrLazyLoading 提供四种不同的屏幕大小版本: 手机 (<768px), 平板 (≥768px), 桌面 (≥992px) 和大型的桌面 (≥1200px)。BttrLazyLoading 超过10个可选项(如多样化动画或背景颜色)和 4 个事件,BttrLazyLoading 是完全可定制以适应最需要的。

BttrLazyLoading 基于 jQuery 响应式懒加载插件

安装

BttrLazyLoding 依赖 jQuery,意味着 jQuery 必须包含在插件文件之前,Animate.css 用于动画这个文件是可选。

<script src="jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="bttrlazyloading.min.css" />
<link rel="stylesheet" type="text/css" href="animate.min.css" />
<script src="jquery.bttrlazyloading.min.js"></script>

API

可选参数

  • delay:增加图像加载时间的延迟。
  • threshold:默认情况下,图像出现在屏幕上时加载。如果希望更早加载图像,请使用阈值参数。将阈值设置为200会导致图像在出现在视图端口之前加载200个像素。
  • animation:在图像加载时添加动画。提供动画:见清单
  • event:定义将用于触发图像加载/更新的事件。
  • placeholder:当图像加载时使用的基本64图像。
  • container:您也可以使用这个插件来处理滚动容器中的图像,例如带有滚动条的div。默认情况下,容器是窗口。
  • retina:使视网膜屏幕具有更好的质量。BttrLazyLoding使用命名约定@2x来显示视网膜的图像。因此,BttrLazyLoding将寻求“YourImage@2x.gif“在视网膜屏幕上”而不是“YourImage.gif”
  • triggermanually:是否手动触发第一个图像加载。
  • updatemanually:是否手动触发图像更新(例如,当窗口调整大小时需要)。
  • backgroundcolor:尚未加载的图像的背景色。
  • xs:用于移动的图像对象
  • sm:平板的图像对象
  • md:桌面的图像对象
  • lg:大型桌面的图像对象

事件

  • bttrlazyloading.preLoad:此事件是在“bttrlazyloading.load”事件之前触发的。
  • bttrlazyloading.load:此事件是在触发图像加载时触发的。
  • bttrlazyloading.afterLoad:此事件是在“bttrlazyloading.load”事件之后触发的。
  • bttrlazyloading.error:当不存在任何图像(xs、sm、md和lg)时会触发此事件。因此,经典的“错误”事件最多可触发8次(正常屏幕为4次,视网膜屏幕为8次),而“bttrlazyloading.Error”仅触发一次。

实例

设置实例化选项

通过数据属性

<img id="yourImageId" class="bttrlazyloading"
  data-bttrlazyloading-xs-src="img/768x200.gif"
  data-bttrlazyloading-sm-src="img/345x250.gif"
  data-bttrlazyloading-md-src="img/455x350.gif"
  data-bttrlazyloading-lg-src="img/360x300.gif"
  data-bttrlazyloading-animation="rotatedIn"
  data-bttrlazyloading-retina="true"
  data-bttrlazyloading-delay="2000"
  data-bttrlazyloading-event="mouseover"
  data-bttrlazyloading-container="document.body"
  data-bttrlazyloading-threshold="500"
/>

要获得完美的体验,“宽度”和“高度”是必要的(插件无法在加载图像之前知道图像的大小)。

<img id="test" class="bttrlazyloading"
  data-bttrlazyloading-xs-src="img/768x200.gif"
  data-bttrlazyloading-xs-width="768"
  data-bttrlazyloading-xs-height="200"
  data-bttrlazyloading-sm-src="img/345x250.gif"
  data-bttrlazyloading-sm-width="345"
  data-bttrlazyloading-sm-height="250"
  data-bttrlazyloading-md-src="img/455x350.gif"
  data-bttrlazyloading-md-width="455"
  data-bttrlazyloading-md-height="350"
  data-bttrlazyloading-lg-src="img/360x300.gif"
  data-bttrlazyloading-lg-width="360"
  data-bttrlazyloading-lg-height="300"
/>

<img id="yourImageId" class="bttrlazyloading"
  data-bttrlazyloading-xs='{"src": "img/720x200.gif", "width" : 720,  "height" : 200}'
  data-bttrlazyloading-sm='{"src": "img/360x200.gif", "width" : 360,  "height" : 200}'
  data-bttrlazyloading-md='{"src": "img/470x200.gif", "width" : 470,  "height" : 200}'
  data-bttrlazyloading-lg='{"src": "img/570x200.gif", "width" : 570,  "height" : 200}'
/>

只需要一个图像大小!BttrLazyLoding总是尝试加载最大版本的可用映像。因此,下面的示例也适用于每个屏幕。

<img id="yourImageId" class="bttrlazyloading"
  data-bttrlazyloading-md-src="img/455x350.gif"
/>

通过实例化

$("#yourImageId").bttrlazyloading({
  xs: {
    src: "img/720x200.gif",
    width: 720,
    height: 200
  },
  sm: {
    src: "img/360x200.gif",
    width: 360,
    height: 200
  },
  md: {
    src: "img/470x200.gif",
    width: 470,
    height: 200
  },
  lg: {
    src: "img/570x200.gif",
    width: 570,
    height: 200
  },
  retina: true,
  animation: 'fadeInUp',
  delay: 1000,
  event: 'click',
  container: 'document.body',
  threshold: 666,
  placeholder: 'test'
})

相关链接

https://github.com/shprink/BttrLazyLoading

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2891 文章
评论
84935 人气
更多

推荐作者

时光倒影

文章 0 评论

qq_YyjhCs

文章 0 评论

三人与歌

文章 0 评论

┼──瘾||

文章 1 评论