Question

当我将一个小img悬停时，我会读取它的较大图像属性，然后创建要显示的图像。

问题是我想在显示图像之前设置超时。

在等待超时时，我们假设已经设置了src以使其尽早加载。

出于某种原因，它永远不会在IE中运行。也就是说，即使在我第二次悬停小图像时它也只会触发负载。我不知道它出了什么问题，我在另一个页面上有非常相似的动画，它在超时时工作正常。

有什么想法吗？..

$(document).ready(function(){

var nn_pp_trail=0;
    $('div.nn_pp_in').hover(function(){
        var limg=$(this).children('img').attr('limg');
        var img=new Image();
            //img.src=limg;
            img.className='nn_pp_z';
            img.src=limg;

        var a=(function(img,par,limg){
            return function(){
                nn_pp_trail=window.setTimeout(showtrail,50);
                $(img).one('load',(function(par){   //.attr('src',limg).
                    return function(){
                        // alert('loaded');
                    window.clearTimeout(nn_pp_trail);
                    hidetrail(); 
                    var width=this.width;
                    var height=this.height;
                    var coef=width/313;
                    var newHeight=height/coef;
                    var newHpeak=newHeight*1.7;
                    var nn=par.parents('.tata_psychopata').nextAll('.nn_wrap').first();
                    var pheight=nn.height();
                    var ptop=nn.position().top-2+pheight/2-1;
                    var pleft=nn.position().left+90+157-1;
                    $(this).appendTo(nn).css('left',pleft+'px').css('top',ptop+'px')
                        .animate({opacity:0.6},0)
                        .animate({opacity:1,top:'-='+newHpeak/2+'px',height:'+='+(newHpeak)+'px',left:'-=10px',width:'+=20px'},130,(function(newHeight,newHpeak){
                            return function(){
                            $(this).animate({left:'-='+(156-10)+'px',width:'+='+(313-20)+'px',height:newHeight+'px',top:'+='+(newHpeak-newHeight)/2+'px'},200,function(){});
                            }
                            })(newHeight,newHpeak)
                        );
                }
                })(par)
                ).each(function(){
                        if(this.complete || this.readyState == 4 || this.readyState == "complete" || (jQuery.browser.msie && parseInt(jQuery.browser.version) <=6)) 
                        $(this).trigger("load");}); ;
            }
        })(img,$(this),limg);   
        window.setTimeout(a,20);    //if I set 0 - it loads all the time. 
                                    //if I set more than 0 timeout
                                    //the load triggers only on the 2nd time I hover.

        $(this).data('img',$(img));

    },function(){

    });


});

Answer 1

 img.src=limg;

这就是问题，在IE中我们不需要在创建图像对象时设置src，但首先将load事件附加到它，然后才设置attr src，然后触发完成每个，例如：

img.one(load, function(){}).attr('src','i.png').each(function(){ /*loaded? then it's complete*/ });

希望有人了解我的错误： - ）

Answer 2

谢谢，这对我帮助很大。我有类似的情况。

正如你所说：首先是“加载”-event，然后是IE的“src”。

// This was not working in IE (all other Browsers yes)
var image = new Image();
image.src = "/img/mypic.jpg";

$(image).load(function() {
    //pic is loaded: now display it
});

// This was working well also in IE
var image = new Image();
imagSrc = "/img/mypic.jpg";

$(image).load(function() {
    //pic is loaded: now resize and display
}).attr('src',imageSrc);

jquery image load（）并在IE中设置超时冲突

2 个答案: