1

問題のページ: http://phwsinc.com/our-work/one-rincon-hill.asp

IE6-8 では、ギャラリーの左端のサムネイルをクリックすると、画像が読み込まれません。サムネイルをもう一度クリックすると、読み込まれます。私は jQuery を使用しています。ギャラリーを動かしているコードは次のとおりです。

$(document).ready(function() {
// PROJECT PHOTO GALLERY
var thumbs = $('.thumbs li a');
var photoWrapper = $('div.photoWrapper');

if (thumbs.length) {
    thumbs.click( function(){
        photoWrapper.addClass('loading');

        var img_src =   $(this).attr('href');

        // The two lines below are what cause the bug in IE. They make the gallery run much faster in other browsers, though.
        var new_img =   new Image();
        new_img.src =   img_src;

        var photo =     $('#photo');
        photo.fadeOut('slow', function() {
            photo.attr('src', img_src);
            photo.load(function() {
                photoWrapper.removeClass('loading');
                photo.fadeIn('slow');
            });
        });

        return false;
    });
}
});

ある同僚は、いつも js の Image() オブジェクトに問題を抱えていて、 に<img />設定された div の内部に要素を追加するだけでよいとアドバイスしてくれましdisplay:none;たが、それは私の好みでは少し面倒です。Image() オブジェクトを使用するのが好きでした。 、それは物事をきれいに保ち、不要な HTML マークアップを追加しませんでした。

どんな助けでも大歓迎です。画像のプリロードがなくても機能するので、他のすべてが失敗した場合は、プリロードをラップしif !($.browser.msie){ }て、1 日と呼びます。

4

1 に答える 1

2

これは既に修正されているようですが、事前読み込みを IE でも機能させることができるかどうかを確認したかったのです。

これを変更してみてください

photo.fadeOut('slow', function() { 
  photo.attr('src', img_src); 
  photo.load(function() { 
    photoWrapper.removeClass('loading'); 
    photo.fadeIn('slow'); 
  }); 
});

これに

photo.fadeOut('slow', function() { 
  photo.attr('src', img_src); 

  if (photo[0].complete){
    photoWrapper.removeClass('loading'); 
    photo.fadeIn('slow'); 
  } else {  
    photo.load(function() { 
      photoWrapper.removeClass('loading'); 
      photo.fadeIn('slow'); 
    }); 
  }
});
于 2010-04-16T02:56:52.670 に答える