jQuery image swap show - ошибка IE8?

Question

Как часть сайта Wordpress для исполнителя, я сделал простой цикл обмена образцами jQuery для использования на каждом отдельном персонализированном сообщении. По существу, просто большое изображение с фотографией, под ним, и набор из семи миниатюр ниже этого, чтобы показать разные виды произведения искусства. Нажатие на каждое эскизное изображение сворачивает текущее большое изображение для href в миниатюре, а также заменяет фотографию. В кредите фотографий используется скрытый div с классом .hideText внутри каждого миниатюры, который содержит имя коррелирующего фотографа, предоставленное PHP.

Все работает правильно в Firefox, Chrome, Opera и IE. 8. В IE8 при первом загрузке каждое изображение можно щелкнуть последовательно, чтобы создать соответствующее большое изображение, но после нажатия седьмого миниатюры или щелчка по прямой числовая последовательность приводит к тому, что большое изображение не отображается, хотя href все еще верен. Примечание: использование jQuery 1.8.2 и Modernizr 2.6.2.

Помимо ошибок IE8, есть еще три неприятности, о которых я хочу упомянуть. 1) Использование .load() производит медленное время загрузки до тех пор, пока изображения не будут кэшированы. Думаю, я должен был использовать предварительный загрузчик, но не уверен, как сделать эту работу с этой настройкой. 2) И поскольку большие изображения медленно загружаются, абсолютно позиционированный фото-кредит иногда показывает сначала не в том месте, где загружается img. В идеальном случае блок кредитных комментариев jQuery будет привязан, чтобы следовать коду загрузки изображения, чтобы этого избежать; Я пытался сделать это с помощью анонимных функций, но не смог заставить его работать, поэтому .delay() - это хакерская и ненадежная альтернатива. 3) При щелчке следует добавить фоновый счетчик #artWrap до того, как старое изображение будет скрыто и удалено после того, как новый будет исчезать, но он не работает последовательно.

Учитывая неожиданное инвестирование времени, в ретроспективе я, вероятно, использовал бы плагин галереи изображений изображений WP, но я хотел узнать об этом. Любые предложения приветствуются!

JQuery Соответствующая:

$('.thumbnail').live("click", function() { 

$('#artWrap').css('background-image', "url('../img/ajax-loader-48-48.gif')"); 
$('#artLarge').hide(); 

var i = $('<img />').attr('src',this.href).load(function() { 
    $('#artLarge').attr('src', i.attr('src')); 
    $('#artLarge').fadeIn(200);  
    $('#artWrap').css('background-image', 'none'); 
}); 

if ($(this).find('.hideText').is(':empty')) { 
    $('#photoCredit').hide().empty(); 
} else { 
    $('#photoCredit').hide().empty(); 
    var newCredit = $(this).find('.hideCredit').html(); 
    $('#photoCredit').html(newCredit).delay(600).fadeIn(200); 
} 

return false; 

}); 

...

Базовая структура ДИВ:

<div id="artShow"> 

    <div id="artWrap" > 

     <div id="artImage"> 
      <img id="artLarge" src="../uploads/EXAMPLE_1-LG.jpg"> 
     </div><!-- #artImage --> 

     <div id="photoCredit"> 
      Photo: Example 1 Photographer 
     </div><!-- .artCredit --> 

    </div><!-- #artWrap --> 

    <div id="artThumbs" class="clearfix"> 

     <div id="thumb1" class="thumb"> 
      <a href="../uploads/EXAMPLE_1-LG.jpg" class="thumbnail nofancybox"><!-- large image link goes in href here --> 
       <img src="../uploads/EXAMPLE_1-SM.jpg" width="72" height="72" ><!-- small image --> 
      </a> 
      <div class="hideCredit">Photo: Example 1 Photographer</div> 

     </div><!-- #thumb1 --> 

     <div id="thumb2" class="thumb"> 
      <a href="../uploads/EXAMPLE_2-LG.jpg" class="thumbnail nofancybox"> 
       <img src="../uploads/EXAMPLE_2-SM.jpg" width="72" height="72" > 
      </a> 
     <div class="hideCredit">Photo: Example 2 Photographer</div> 

     </div><!-- #thumb2 --> 

     <div id="thumb3" class="thumb"> ... ETC ... </div> 
     <div id="thumb4" class="thumb"> ... ETC ... </div> 
     <div id="thumb5" class="thumb"> ... ETC ... </div> 
     <div id="thumb6" class="thumb"> ... ETC ... </div> 
     <div id="thumb7" class="thumb"> ... ETC ... </div> 

    </div><!-- #artThumbs --> 

</div><!-- #artShow --> 

...

Пе rtinent CSS:

/* Content shell for whole image swap show */ 
#artShow { float: right; position: relative; width: 630px; min-height: 570px; } 

/* wrap for both image and photo credit */ 
#artWrap { float: left; position: relative; background: url('../img/ajax-loader-48-48.gif') center center no-repeat; } 

/* wrapper for large image */ 
#artImage { min-height: 456px; margin-bottom: 19px; line-height: 0; /* lh adjusts photo credit */ } 

/* ID attached to large img */ 
#artLarge { } 

/* photo credit below artImage */ 
#photoCredit { 
position: absolute; 
right: 0; 
bottom: -5px; 
height: 16px; 
padding-top: 3px; 
width: 100%; 
text-align: right; 
} 

#artThumbs { position: absolute; top: 492px; left: 0; width: 651px; height: 72px; } 

.thumb { float: left; margin-right: 21px; width: 72px; height: 72px; background-color: #c9c9c9; } 

.thumbnail { display: block; width: 72px; height: 72px; } 

Answer 1

После немного отладки с помощью ступенчатого URL вы указали, я думаю, что я могу видеть, что эта проблема для вас.

Казалось бы, ваша функция .load() для изображения (строка 57 из AM_main.js) вызывается только при первом загрузке изображения. Если одно и то же изображение нажимается второй раз, функция load() не вызывается.

Это потому, что изображение уже загружено и, таким образом, находится в кеше браузера, когда вы снова загружаете его. Здесь происходит то, что событие load- это стрельба, но поскольку изображение уже находится в кеше, оно запускает сразу, когда установлен атрибут src.

Ключевым здесь является слово .Событие load запускается и завершается до того, как jQuery переходит к следующему биту кода ... в котором вы указываете функцию, которую вы хотите выполнить для события load. Функция load() определяется после того, как событие load уже произошло.

Таким образом, решение здесь заключается в изменении порядка вашего кода jQuery, так что функция события загрузки определяется до того, как вы укажете атрибут src. Это довольно тривиально; это просто необходимо небольшое перестановке вашего существующего кода, например, так:

var i = $('<img />').load(function() { 
    .... 
}).attr('src',this.href); 

Будем надеяться, что должно решить эту проблему для вас.

Альтернативным решением было бы избежать повторного создания нового элемента <img> каждый раз, когда вы запускаете событие click. Если бы у вас был один элемент <img>, который был повторно использован каждый раз, то загрузка даже всегда была бы на месте, когда был установлен src, поэтому проблема, описанная выше, не возникла бы; даже если событие сразу срабатывало, это было бы хорошо, потому что функция обработчика событий уже существует.

Это решение также даст вам небольшое преимущество в производительности, от необходимости неоднократно создавать элемент <img>.

Недостатком, конечно же, является то, что это будет большее изменение кода, чем другое решение выше. Но это не будет огромная работа, поэтому, возможно, вам стоит попробовать.

Какое бы решение вы ни выбрали, я надеюсь, что это поможет.