异步加载图片

今天看到论坛上有人发了一个异步加载图片的效果,看了看想法确实不错,主要就是 建立一个$("<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

 

 

posted on 2009-06-24 16:27  trance  阅读(2705)  评论(5编辑  收藏  举报

导航