异步加载图片

今天看到论坛上有人发了一个异步加载图片的效果，看了看想法确实不错，主要就是 建立一个$("<img \/>")对象，并动态设置它的src属性 在load结束的时候执行相应操作：

 $('<img src="' + url + '">').load(function(){

            $("#imgcon").html(this);
        });

当然在出现错误的时候我们也可以用 如下方式来处理：

.error( //加载出现错误时
    function(){
        $("info").html(errorinfo);
        }

      ) 

综合这些，写了一个小例子：

    $(function(){
        var errorinfo="Error loading image"; //预备的错误信息
        var tempimg=$('<img \/>'); //创建一个img对象
        var loadinfo=$('<img src="http://nba.titan24.com/focus/kikx/trancepics/loadinfo.gif" class="loadinfo" />'); //加载提示图片
        var li=$("#list li"); 
        var imgcon=$("#large"); //图片容器
        var url="http://nba.titan24.com/focus/kikx/trancepics/0.jpg"; //默认开始的图片
        var loadnew=function loadnew(){ //加载显示图片的函数
            tempimg
            .attr("src",url) //设置地址                    
            .load(function(){    //加载完毕在相应位置显示                         
                imgcon.html(this); 
                }).error( 
                    function(){ //调取出错报错
                        imgcon.html(errorinfo);
                        }
                    )
            }
        loadnew();    //初始化    
        li.mouseover(function(){ 
            if(!$(this).hasClass("cur")){ //如果不是当前的
            imgcon.html(loadinfo); //先显示加载提示图片
            url=$(this).find("a").attr("rel"); //获取要加载的图片地址
            setTimeout(loadnew,300); //延时加载 防止鼠标快速划过
            cur(this,"cur"); //标记当前
            }
        })
        function cur(ele,currentClass){ //标记当前函数     
        ele= $(ele)? $(ele):ele;
        ele.addClass(currentClass).siblings().removeClass(currentClass);        
        }
        
    })

 

 点击此处查看 DEMO