jQuery实现动态加载大尺寸图片

如果页面中的图片下载尺寸太大，而且不需要把所有图片显示在页面中，可以使用js来动态加载图片，即友好又加快了整个页面的加载速度。不多说了，直接看下面代码，这里是使用了jQuery库实现，使用的版本为1.4.2的。

DOM结构：

    <div id="slider">
        <div class="nav">
            <ul>
                <li>
                    <a href="http://www.wallcoo.com/paint/Robert_Finale_art_paintings/
                        wallpapers/1280x800/Robert_Finale_art_paintings_PortofinoDawn.jpg">Image 1</a>
                </li>
                <li>
                    <a href="http://www.wallcoo.com/paint/Robert_Finale_art_paintings/
                        wallpapers/1280x800/Robert_Finale_art_paintings_ReflectionOfBelgium.jpg">Image 2</a>
                </li>
                <li>
                    <a href="http://www.wallcoo.com/paint/Robert_Finale_art_paintings/
                        wallpapers/1280x800/Robert_Finale_art_paintings_SummerBreeze.jpg">Image 3</a>
                </li>
                <li>
                    <a href="http://www.wallcoo.com/paint/Robert_Finale_art_paintings/
                        wallpapers/1280x800/Robert_Finale_art_paintings_NewBeginnings.jpg">Image 4</a>
                </li>
            </ul>
        </div>
        <div class="photos">
            <ul>
                <li>
                    <a href=""><strong>第 1 张图片</strong></a>
                </li>
                <li>
                    <a href=""><strong>第 2 张图片</strong></a>
                </li>
                <li>
                    <a href=""><strong>第 3 张图片</strong></a>
                </li>
                <li>
                    <a href=""><strong>第 4 张图片</strong></a>
                </li>
            </ul>
        </div>
    </div>

用简单的CSS代码调整下结构：

    *{margin:0;padding:0}
    body{font-family:Verdana;font-size:12px}
    ul{list-style:none}
    img{border:0;vertical-align:bottom}
    #slider{width:600px;margin:0 auto}
    #slider .nav{width:100px;float:left}
    #slider .nav li{height:30px;line-height:30px}
    #slider .nav li a{display:block;height:30px;font-weight:700;color:#333}
    #slider .nav li a:hover{color:red}
    #slider .photos{border:solid 1px #ccc;overflow:hidden;float:left;padding:10px}
    #slider .photos,#slider .photos li,#slider .photos img{width:400px;height:300px}
    #slider .photos li{display:none;position:relative}
    #slider .photos li a{
    text-decoration:none;
    color:#999;
    }
    #slider .photos li .loading{position:absolute;z-index:9;
    font-size:18px;font-weight:700;color:#fc0}

javascript实现动态加载图片：

    $(function(){
        //获取所需元素集合，缓存到jquery对象
        var div = $("#slider"), li = $("div.photos li", div);
        //默认显示第一张图片的容器
        li.eq(0).show();
        //声明setInterval变量，用来显示图片下载进度
        var process;
        $("div.nav li", div).each(function(i){
            $(this).bind("mouseover", {
                index: i
            }, function(e){
                var i = e.data.index, curr = li.eq(i), a = $("a", curr);
                //显示当前导航对应的图片的容器
                li.hide().eq(i).show();
                //立即清除所有图片下载显示进度
                clearInterval(process);
                a.empty();
                //append一个进度提示到当前图片容器
                $('<span></span>', {
                    text: "loading",
                    "class": "loading",
                    css: {
                        top: parseInt((li.height() - $(this).height()) / 2) + "px",
                        left: parseInt((li.width() - $(this).width()) / 2) + "px"
                    }
                }).appendTo(a);
                //append一个img元素到当前图片容器
                $('<img />').appendTo(a);
                var img = $("img", curr);
                //动态显示下载进度
                process = setInterval(function(){
                    loading($(".loading", curr), 10, "loading");
                }, 200);
                img.load(function(){
                    //图片加载后隐藏图片下载进度显示
                    $(".loading", curr).fadeOut();
                    clearInterval(process);
                });
                img.attr("src", $("a", this).attr("href"));
            });
        });
    });
    function loading(element, maxlength, loadingText){
        $(element).text(function(i, text){
            return (text.length < maxlength) ? text + "." : loadingText;
        });
    }