Question

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

    });


});

Answer 1

 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 🙂