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

Question

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

安装

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