Предварительная загрузка изображения ошибки в IE6-8

Question

Страница в вопросе: 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){ } и назову это днем.

Answer 1

Я вижу, вы уже исправили это, но я хотел посмотреть, смогу ли я заставить предварительную загрузку работать и в 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'); 
    }); 
  }
});