Событие image.onload и кеш браузера

Я хочу создать окно предупреждения после загрузки изображения, но если изображение будет сохранено в кеше браузера, событие .onload не будет запущено.

Как инициировать оповещение при загрузке изображения независимо от того, было ли кеширование изображения или нет?

var img = new Image();
img.src = "img.jpg";
img.onload = function () {
   alert("image is loaded");
}

Ответ 1

Когда вы генерируете изображение динамически, установите свойство onload до src.

var img = new Image();
img.onload = function () {
   alert("image is loaded");
}
img.src = "img.jpg";

Fiddle - протестирован на последних версиях Firefox и Chrome.

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

var img = new Image();
// 'load' event
$(img).on('load', function() {
  alert("image is loaded");
});
img.src = "img.jpg";

Fiddle

Ответ 2

Существует два возможных решения для таких ситуаций:

Используйте предложенное решение этот пост
Добавьте к изображению src уникальный суффикс, чтобы заставить браузер загружать его снова, например:
```
var img = new Image();
img.src = "img.jpg?_="+(new Date().getTime());
img.onload = function () {
    alert("image is loaded");
}
```

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

Ответ 3

Если src уже установлен, событие запускается в кэшированном случае, прежде чем вы получите привязку обработчика события. Таким образом, вы также должны инициировать событие на основе .complete.

пример кода:

$("img").one("load", function() {
   //do stuff
}).each(function() {
   if(this.complete || /*for IE 10-*/ $(this).height() > 0)
     $(this).load();
});

Ответ 4

Сегодня я столкнулся с той же проблемой. После того, как я попробовал различный метод, я понял, что просто поставить код размера внутри $(window).load(function() {}) вместо document.ready может решить часть проблемы (если вы не используете страницу).

Ответ 5

Я обнаружил, что вы можете просто сделать это в Chrome:

  $('.onload-fadein').each(function (k, v) {
    v.onload = function () {
        $(this).animate({opacity: 1}, 2000);
    };
    v.src = v.src;
});

Установка .src сама приведет к событию onload.