Minimalist Image Lazy Load Plugin - jquery.lazy

Minimalist Image Lazy Load Plugin - jquery.lazy

版本:

浏览量:296

最后更新:2021-09-12

应用标签:Jquery插件MAC 软件

推荐指数:

详细信息

一个非常简单、超轻 (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();
 
});

发表评论

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