基于jQuery的图片异步加载和预加载实例

浏览数：34 / 时间：2015年06月09日

如今的网页中有很多图片，比如相册列表，那么如果一次性读取图片将会瞬间加重服务器的负担，所以我们用jQuery来实现图片的异步加载和预加载功能，这样在页面的可视范围内才会加载图片，当拖动页面至可视界面时，其他图片才会加载，改插件很好地实现了图片异步加载功能。

技术分享

在线预览源码下载

html代码部分：

 <div id="content">
        <div id="button">
            <ul>
                <li>小图</li>
                <li>中图</li>
                <li>大图</li>
            </ul>
        </div>
        <div id="image">
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            //把图片写入htm
            var imgArr = "";
            for (var i = 1; i <= 25; i++) {
                if (i <= 25) {//因上传到17素材超过规定大小，不得不将过多的图片略去，为了达到更好的效果，可以自行修改此循环代码，并且增加其余图片，体验异步加载
                    imgArr += ‘<img class="scrollLoading" data-url="image/‘ + i + ‘.jpg" src="image/grey.gif" />‘;
                } else {
                    imgArr += ‘<img class="scrollLoading" data-url="image/13.jpg" src="image/grey.gif" />‘;  //超过26张后显示的图片
                }
            }
            $("#image").append(imgArr);
            $("img").load(function () {
                //图片默认隐藏  
                $(this).hide();
                //使用fadeIn特效  
                $(this).stop().fadeIn("5000");
            });
            // 异步加载图片，实现逐屏加载图片
            $(".scrollLoading").scrollLoading();


            ////以下代码为效果代码，非异步加载核心

            //设置页面最外层容器的最小高度为屏幕的高度
            $("#content").css({ "min-height": $(window).height() });
            $("#button li:first-child").addClass("li_hover");
            var index_button = 0;
            $("#button").on("click", "ul li", function () {
                index_button = $(this).index();
                $("#button li").removeClass("li_hover");
                $(this).addClass("li_hover");
                if (index_button == 0) {//效果一
                    $("img").stop().animate({ "width": "225px", "height": "132px" }, 600);
                } else if (index_button == 1) {//效果二
                    $("img").stop().animate({ "width": "500px", "height": "294px" }, 600);
                } else {//效果三
                    $("img").stop().animate({ "width": "1050px", "height": "618px" }, 600);
                }
            });
            $("#button li").hover(function () {
                $(this).addClass("li_hover");
            }, function () {
                if (index_button != $(this).index()) {
                    $(this).removeClass("li_hover");
                }
            });

        });
    </script>