Остановите мерцание тегов img при повторном рендеринге с помощью JavaScript

Question

Наше веб-приложение полностью построено на JS.
Чтобы сделать его быстрым, мы кэшируем ресурсы (модели) между представлениями страниц и перезагружаем ресурс при просмотре страницы.

Наш поток выглядит следующим образом:

1. Пользователь находится в ViewA
2. Пользователь переключается на ViewB
3. Мы используем кэшированный ресурс для рендеринга ViewB
4. Запускаем выборку дляресурс
5. Когда ресурс извлекается, мы выполняем рендеринг

Это имеет неприятный недостаток - мерцание тегов <img>, даже если они одинаковые.
Проблемаэто то, что Backbone.js, который мы используем, не говорит нам, изменилось ли что-нибудь при извлечении коллекции, просто о том, что она была извлечена.

Вот небольшая демонстрация того, что я имею в виду: http://jsfiddle.net/p7DdG/
Это происходит только в веб-наборе и с <img> тегами, а не с фоновыми изображениями, как вы можете видеть.

Мы считаем, что это некрасиво использовать background-image вместо правильного img тега.

Есть ли какое-нибудь решение для этого?

Answer 1

Проблема исчезла в Chrome 19, проблема решена:)

Answer 2

Я столкнулся с той же проблемой и заметил, что иногда изображения мерцают, а иногда нет.Даже в последнем Chrome (v33 на данный момент).

Для потомков мерцание происходит с некэшированными изображениями .

В моем случае Cache-Control: public, max-age=31536000 полностью устранило его.

Answer 3

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

 var newImageSrc = "http://www.google.com/intl/en_com/images/srpr/logo3w.png";
 if (newImageSrc != $("img").attr("src")) {
    $('img').replaceWith('<img src="'+newImageSrc +'">');
 } 

В качестве альтернативы - загрузите изображение за пределы экрана и прикрепите обработчик события к событию onload изображения, которое перемещает изображение в родительский тег текущего изображения, и удалите старый.например,

var oldImage = $("#oldImageId");
var newImageSrc = "http://www.google.com/intl/en_com/images/srpr/logo3w.png";
var newImage = new Image();
$(newImage).load(function (event) {
    $(oldImage).parent().append(newImage);
    $(oldImage).detach();
});
$(newImage).attr("src", newImageSrc);