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не вирішить частину проблеми (якщо ви не відмовляєте сторінку).

Я виявив, що ви можете просто зробити це в Chrome:

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

Встановлення .src для себе призведе до події завантаження.