详细信息
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
}],
发表评论
◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。