在滚动时交换图像源(延迟加载) - jQuery lazy-out.js

在滚动时交换图像源(延迟加载) - jQuery lazy-out.js

版本:

浏览量:961

最后更新:2021-09-12

应用标签:gitJquery插件MAC 软件

推荐指数:

详细信息

lazy-out.js 是一个用于延迟加载图像的小型 jQuery 插件,当图像在视口中可见时,它会自动用原始图像替换占位符。

如何使用它:

1. 下载 JavaScript 文件并将其放置lazy-out.js在 jQuery 之后。

<script src="https://code.jquery.com/jquery-1.12.4.min.js"
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
        crossorigin="anonymous">
</script>
<script src="lazy-out.js"></script>

2. 使用以下data属性将图像插入您的网页

  • 类 =“懒惰”:必需

  • data-orig-file:原始图像的路径

  • data-orig-size:图像大小

  • data-lazy-src:占位符图像的路径

<img
      class="lazy"
      data-orig-file="https://source.unsplash.com/random/800x600"
      data-orig-size="800,600"
      data-lazy-src="https://via.placeholder.com/800x600" >

3. 就是这样。您可以data按如下方式覆盖默认属性:

var LazyOut = [{
    "lazySrc": "lazy-src",
    "originalSrc": "orig-file",
    "originalSize": "orig-size"
}],

4. 指定插件开始加载原始图像的顶部偏移量。

var LazyOut = [{
    "threshold": 300
}],
联系我们
付费复制 免费复制 付费复制
付费后30天内不限量复制

价格:元

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

正在加载二维码...

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

发表评论

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