当前位置:   article > 正文

前端图片懒加载插件jquery.lazyload.min.js

jquery.lazyload.min.js

HTML部分

<img class="lazy"  data-original="/img/ercode_bottom.png"/>

页面引入

  1. <script type="text/javascript" src="/js/jquery-1.7.2.min.js?v=2019022701"></script>
  2. <script src="/js/jquery.lazyload.min.js?v=20123"></script>

尾部使用

  1. <script>
  2. $(document).ready(function() {
  3. $("img.lazy").lazyload();
  4. });
  5. </script>

注意事项:

页面中已显示的加载出来,overflow:hidden隐藏起来的图片要scroll初始化一下;例如

  1. <script>
  2. $('#idDom').scroll(function(){
  3. $("img.lazy").lazyload();
  4. })
  5. </script>

使用目的:

优化页面性能,提升用户体验,减少服务器压力;

插件地址:

https://pan.baidu.com/s/1ewyrpdZkn7O8u1D1q51Vu

提取码:9p9u

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/AllinToyou/article/detail/120896
推荐阅读
相关标签
  

闽ICP备14008679号