js实现图片懒加载

• xiaohu
• 23/07/15
• 1
• 771

[前言]

对于一些需要展示大量图片的网站，一次性加载，需要等待很长时间，有一种常用的解决方式是：随着滚动动态加载，即图片的惰性加载。视图之外的图片默认不加载，随着页面的滚动，图片进入了显示的范围，则触发图片的加载显示

[安装]

1、下载jquery.lazyload.js，并引入项目中去

http://lib.h-ui.net/lazyload/1.9.3/lazyload.js

2、将图片的真实路径放在img的data-original属性上。给img标签增加一个自定义的类名如：lazyload，方便js调用

<img class="lazyload" src="默认loading图片" width="1000" height="60" data-original="//images.h-ui.net/www/AD-1000x60.gif" />

3、js代码

$(function(){$("img.lazyload").lazyload();});

4、jquery.lazyload.js还有很多额外参数，具体功能如下

5、示例效果如下