懒加载jquery.lazyload.js

首先引入jquery文件和懒加载文件

<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.w3cways.com/demo/LazyLoad/js/jquery.lazyload.js"></script>

<div>
懒加载lazyload
<img class="lazy" src="https://www.juzilicai.com/res/img/v2/intro/novice/vip_top.jpg" data-original="https://www.juzilicai.com/res/img/v2/intro/novice/vip_top.jpg">
<img class="lazy" src="https://www.juzilicai.com/res/img/v2/intro/novice/vip_top.jpg" data-original="https://www.juzilicai.com/res/img/v2/intro/novice/vip_top.jpg">
<img class="lazy" src="https://www.juzilicai.com/res/img/v2/intro/novice/vip_top.jpg" data-original="https://www.juzilicai.com/res/img/v2/intro/novice/vip_top.jpg">
<img class="lazy" src="https://www.juzilicai.com/res/img/v2/intro/novice/vip_top.jpg" data-original="https://www.juzilicai.com/res/img/v2/intro/novice/vip_top.jpg">
<img class="lazy" src="https://www.juzilicai.com/res/img/v2/intro/novice/vip_top.jpg" data-original="https://www.juzilicai.com/res/img/v2/intro/novice/vip_top.jpg">
<img class="lazy" src="https://www.juzilicai.com/res/img/v2/intro/novice/vip_top.jpg" data-original="https://www.juzilicai.com/res/img/v2/intro/novice/vip_top.jpg">
<img class="lazy" src="https://www.juzilicai.com/res/img/v2/intro/novice/vip_top.jpg" data-original="https://www.juzilicai.com/res/img/v2/intro/novice/vip_top.jpg">
<img class="lazy" src="https://www.juzilicai.com/res/img/v2/intro/novice/vip_top.jpg" data-original="https://www.juzilicai.com/res/img/v2/intro/novice/vip_top.jpg">
<img class="lazy" src="https://www.juzilicai.com/res/img/v2/intro/novice/vip_top.jpg" data-original="https://www.juzilicai.com/res/img/v2/intro/novice/vip_top.jpg">
<img class="lazy" src="https://www.juzilicai.com/res/img/v2/intro/novice/vip_top.jpg" data-original="https://www.juzilicai.com/res/img/v2/intro/novice/vip_top.jpg">
<img class="lazy" src="https://www.juzilicai.com/res/img/v2/intro/novice/vip_top.jpg" data-original="https://www.juzilicai.com/res/img/v2/intro/novice/vip_top.jpg">
<img class="lazy" src="https://www.juzilicai.com/res/img/v2/intro/novice/vip_top.jpg" data-original="https://www.juzilicai.com/res/img/v2/intro/novice/vip_top.jpg">
<img class="lazy" src="https://www.juzilicai.com/res/img/v2/intro/novice/vip_top.jpg" data-original="https://www.juzilicai.com/res/img/v2/intro/novice/vip_top.jpg">
</div>

<script type="text/javascript">
$(function() {
$("img.lazy").lazyload({
effect : "fadeIn"
});
});
</script>

图片的标签需要添加data-original属性,并且添加一个针对懒加载的样式 class="lazy"

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

绑定懒加载事件.

详细可参考http://www.w3cways.com/1765.html

根据用户行为的预加载

http://www.zhangxinxu.com/wordpress/2016/06/image-preload-based-on-user-behavior/