jquery实现图片懒加载

使用步骤:

引包，先引入jquery，再引入lazyload

设置img属性

img的真实路径不能直接放在src里边，需要放在data-original，添加类型，为了方便查找

设置img的宽高（可以通过行内设置，也可以通过css设置）

$('img.类名').lazyload()进行初始化

html结构

<div class="box"></div>//创建这个div的作用是为了一打开页面时图片不出现在当前窗口，当往下滑动鼠标时展示图片，监听NetWork
<img class="lazy" data-original="./images/1.jpg"/>

css样式

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

javascript行为

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