详细信息
一个非常简单、超轻 (1kb) 和跨浏览器的 jQuery 图像延迟加载插件，可在img标签滚动到视图中时动态加载并用原始图像替换占位符。
看看它在行动：
如何使用它：
1. 要使用此插件，请在 jQuery JavaScript 库之后下载并插入 JavaScript 文件“jquery.lazy.js”。
<script src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
crossorigin="anonymous">
</script>
<script src="src/jquery.lazy.js"></script>2. 将'lazy' 属性添加到您想要延迟加载事件直到它们进入视野的图像。
src：占位符图像的路径
data-src：原始图像的路径
<img lazy
src="placeholder.jpg"
data-src="1.jpg">
<img lazy
src="placeholder.jpg"
data-src="2.jpg">
<img lazy
src="placeholder.jpg"
data-src="3.jpg">
<img lazy
src="placeholder.jpg"
data-src="4.jpg">
<img lazy
src="placeholder.jpg"
data-src="5.jpg">3. 就是这样。要手动初始化插件，只需调用img和 done上的函数即可。
<img class="lazy-load"
src="placeholder.jpg"
data-src="1.jpg">
<img class="lazy-load"
src="placeholder.jpg"
data-src="2.jpg">
<img class="lazy-load"
src="placeholder.jpg"
data-src="3.jpg">
<img class="lazy-load"
src="placeholder.jpg"
data-src="4.jpg">
<img class="lazy-load"
src="placeholder.jpg"
data-src="5.jpg">$(function(){
$('.lazy-load').lazy();
});
发表评论
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。