使用jquery.lazyload进行图片懒加载

首先需要引入jquery.js和jquery.lazyload.js,然后对<img>标签进行修改,将原来的src属性改为data-original设置图片地址,最后加入初始化js代码即可,最终示例代码如下:

<script src="jquery-1.11.0.min.js"></script><script src="jquery.lazyload.js"></script><script>$(function(){$("img.lazy").lazyload({effect:"fadeIn",//载入效果使用渐变threshold:100,//离页面还有100px时开始加载container:"$("#container")//对指定容器内的图片实现效果,lazyload默认对整个浏览器拉动滚动条的时候生效,建议不要指定容器,容易导致lazyload无效});});</script><div><img class="lazy" data-original="xxx/xx.jpg"><img class="lazy" data-original="xxx/xx.jpg"><img class="lazy" data-original="xxx/xx.jpg"></div>