1

小さな画像にカーソルを合わせると、大きな画像属性を読み取り、その画像を作成して表示します。

問題は、画像を表示する前にタイムアウトを設定したいということです。

そして、そのタイムアウトを待っている間、それを早くロードするようにsrcをすでに設定していると思います。

何らかの理由で、IEでは機能しません。つまり、小さな画像に2回ホバーしたときでも、ロードがトリガーされるだけです。何が問題になっているのかわかりません。他のページにも非常によく似たアニメーションがあり、タイムアウトしても問題なく機能しています。

何か案は？..

$(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 
 img.src=limg;

これが問題でした。IEでは、イメージオブジェクトを作成するときにsrcを設定する必要はありませんが、最初にloadイベントをアタッチし、次にattr srcを設定してから、それぞれでトリガーを完了します。

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

誰かが私の間違いについて学ぶことを願っています:-)

于 2012-06-11T18:43:09.450 に答える
1

ありがとう、これは私を大いに助けました。私も同じような状況でした。

あなたが言ったように：最初に「load」イベント、次に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);
于 2013-09-06T12:44:41.177 に答える