jquery.lazyload.js 插件实现图片异步延迟加载

图片异步加载，就是不必一次性把页面的所有图片都加载显示出来，等用户滑动滚动条到某个位置时才会加载显示相应位置的图片，这样能很好地提升网页加载速度，进一步提升用户体验。

1、导入 JS 插件：

<script type="text/javascript" src="../js/jquery.lazyload.js"></script>       //注意此处引入jquery的路径
<script type="text/javascript" src="../js/jquery.scrollLoading.js"></script>  //注意此处引入jquery的路径

2、在页面中插入 JavaScript 代码：

<script>
    //图片异步加载
    jQuery(document).ready(function($){
        //实现图片慢慢浮现出来的效果
        $("img").load(function () {
            //图片默认隐藏
            $(this).hide();
            //使用fadeIn特效
            //$(this).fadeIn("5000");
            $(this).stop().fadeIn("5000");
        });
        // 异步加载图片，实现逐屏加载图片
        $(".scrollLoading").scrollLoading();
    });
<script>