有些号称延迟加载的插件其实并没有做到按需加载,只是提前将图片下载好,按需展示。这样的话,依然是多并发,只是在浏览体验上好了那么一点。
而经过我的实验,发现jquery.lazyload.js这个插件可以真正的实现按需加载,打开调试模式可以看到,默认情况下图片是不加载的,只有当滚动到底部时才发出加载图片的请求。这样不仅降低并发减少服务器压力,还可以加快页面载入速度获得良好的用户体验。
实现方法也非常简单。
首先引入jquery.js和jquery.lazyload.js
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/tuupola/jquery_lazyload/master/jquery.lazyload.min.js"></script>
// 默认占位符是灰色图片,可以自己替换js里的placeholder为空或者指定的站位图片,也可以在html部分指定src为空
其次,定义图片格式:
<img class="lazy" src="" data-original="图片地址" width="100" height="100" alt="">
调用代码:
<script type="text/javascript">
$(function() {
$("img.lazy").lazyload({
threshold : 200, // 设置阀值
effect : "fadeIn" // 设置图片渐入特效
});
});
</script>