CODEWITHSUNDEEP
javascriptjqueryhtmlinternet-exploreranimation
Anonymous
Anonymous

Reputation: 4632

jquery image load() and set timeout conflict in IE

As I hover a small img, I read it's larger image attribute, and create that image to display.

The problem is that I want to set Timeout before to display the image.

And while waiting for that timeout, we suppose to already have set an src to make it load early.

For some reason it never works in IE. ie, it only triggers the load even on the second time I hover the small image. I've no idea what has gone wrong with it, I had very similar animation on the other page it has been working just fine with a timeout.

Any ideas?..

$(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(){

    });


});

Upvotes: 1

Views: 1596

Answers (2)

arthur
arthur

Reputation: 11

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);

Upvotes: 1

Anonymous
Anonymous

Reputation: 4632

 img.src=limg;

This was the problem, in IE we need not to set src as we create an image object, but first attach load event to it, and only then set attr src, and then trigger complete with an each, eg:

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

Hope someone learn on my mistakes :-)

Upvotes: 1

Related Questions