真正的LazyLoad按需加载

有些号称延迟加载的插件其实并没有做到按需加载,只是提前将图片下载好,按需展示。这样的话,依然是多并发,只是在浏览体验上好了那么一点。

而经过我的实验,发现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>

你可能感兴趣的:(jQuery)