其他分享
首页 > 其他分享> > jquery实现图片懒加载

jquery实现图片懒加载

作者:互联网

 

使用步骤:

  1. 引包,先引入jquery,再引入lazyload
  2. 设置img属性
  3. img的真实路径不能直接放在src里边,需要放在data-original,添加类型,为了方便查找
  4. 设置img的宽高(可以通过行内设置,也可以通过css设置)
  5. $('img.类名').lazyload()进行初始化
html结构
<div class="box"></div>//创建这个div的作用是为了一打开页面时图片不出现在当前窗口,当往下滑动鼠标时展示图片,监听NetWork <img class="lazy" data-original="./images/1.jpg"/>

  

css样式
<style> .box { height: 2000px; width: 400px; } .lazy { width: 200px;/*设置图片的宽度高度等比例缩放*/ } </style>

  

javascript行为
<script src="./lib/jquery-1.12.4.js"></script> <script src="./lib/jquery.lazyload.js"></script> <script> $('img.lazy').lazyload(); </script>

  

标签:jquery,lazyload,img,width,设置,加载,css,图片
来源: https://www.cnblogs.com/lixiaoxue/p/11081914.html