1

当我将鼠标悬停在一个小 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(){

    });


});
4

2 回答 2

1

Thank you, this helped me a lot. I had a similar situation.

As you said: First the "load"-event, then the "src" for IE.

// 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);
于 2013-09-06T12:44:41.177 回答
1 
 img.src=limg;

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

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

希望有人能从我的错误中吸取教训:-)

于 2012-06-11T18:43:09.450 回答