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>