image.onload подія та кеш браузера


113

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

Як запустити попередження, коли зображення завантажено незалежно від того, кешировано чи ні?

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

Відповіді:


153

Коли ви динамічно генеруєте зображення, встановіть 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перед встановленням .onload? Ви мали це право в першому прикладі коду, але переплутали другий. Другий не працюватиме належним чином у деяких версіях IE.
jfriend00

1
@ jfriend00 Ні, не безлад. Код резервного копіювання (другий) саме для того випадку, якщо перший якимось чином перестане працювати. =]Він використовує .completeперевірку на випадок, якщо зображення вже було кешоване, отже, код демонстрував це. Звичайно, для найкращої практики завжди можна встановити srcобов'язковість обробників.
Fabrício Matté

4
В .completeцьому випадку немає жодних підстав покладатися . Просто встановіть вантажник-навантажувач спочатку перед налаштуванням, .srcі це НІКОЛИ не потрібно. Я написав слайд-шоу, яке використовується тисячами сайтів у кожному можливому браузері, і перша техніка працює щоразу. Не потрібно ніколи перевіряти, .completeколи створювати нове зображення з нуля, як це.
jfriend00

Добре, дякую за голову, оновив відповідь, щоб відобразити ваші міркування =]. Також @ jfriend00 ви можете перевірити, чи завантажується зображення в IE? Цікаво, чи це проблема з моєю мережею чи IE та зображенням.
Fabrício Matté

9
Також сьогодні я виявив, що веб-кайту потрібно img.src = ''перед призначенням нового src, якщо він використовувався раніше.
quux

10

Якщо src вже встановлений, подія запускається в кешованому випадку, перш ніж ви навіть зв’яжете обробник подій. Отже, вам слід також викликати подію, що також базується .complete.

зразок коду:

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

6

Для таких ситуацій можливі два варіанти:

  1. Скористайтеся запропонованим рішенням у цій публікації
  2. Додайте унікальний суфікс до зображення, srcщоб змусити браузер завантажувати його знову, наприклад:

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

У цьому коді кожного разу, додаючи поточну позначку часу до кінця URL-адреси зображення, ви робите його унікальним, і браузер завантажує зображення знову


44
Все це робить кешування поразки. Це неправильний спосіб вирішити цю проблему. Правильний шлях - у відповіді Фабрикіо. Просто встановіть .onloadобробник перед встановленням .srcзначення, і ви не пропустите подію завантаження в деяких версіях IE.
jfriend00

1
так, ви маєте рацію, але кеш не завжди бажаний, іноді зображення не повинні кешуватися. Звичайно, в цій конкретній ситуації це залежить від потреб
хайнар

1
У своєму кутовому додатку я спробував усе, що говорить інші відповіді, але не допомогло. Але змушувати не кешувати, як ця відповідь говорить, що працювало для мене. Так плюс один від мене.
Thanu

Єдине рішення, яке працювало для мене в останній версії Chrome.
Молодий Боб

3

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


Це також хороша відповідь для ситуації, коли у браузера є кешоване зображення, працює нормально з завантаженням вікон
Shocker

саме питання, з яким я стикався. змінюючись, $(document).readyщоб $(window).loadвирішити мою проблему.
Таріклу Іслам

0

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

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

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

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.