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

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

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

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

Поскольку вы создаете изображение динамически, установите 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";

Скрипка

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

пример кода:

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

В таких ситуациях есть два возможных решения:

1. Используйте решение, предложенное в этом посте

2. Добавьте уникальный суффикс к изображению, srcчтобы браузер снова загрузил его, например:

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

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

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

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

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

Установка самого .src вызовет событие onload.