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

如今的网页中有很多图片，比如相册列表，那么如果一次性读取图片将会瞬间加重服务器的负担，所以我们用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>

via:http://www.w2bc.com/Article/14496