изображение.события onload и кэш браузера

Question

изображение.события onload и кэш браузера

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

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

var img = new Image();

img.src = "img.jpg";

img.onload = function () {

   alert("image is loaded");

}

481 5

javascript image-loading

5 ответов:

Comments

Ничего не найдено.

Fabrício Matté · Accepted Answer · 2017-05-23 14:47:21

как вы генерируете изображение динамически, установите onload собственность до src.
var img = new Image();
img.onload = function () {
   alert("image is loaded");
}
img.src = "img.jpg";
Скрипка - протестировано на последних версиях Firefox и Chrome.

вы также можете использовать ответ на этот в должности, который я адаптировал для одного динамически генерируемые изображения:
var img = new Image();
// 'load' event
$(img).on('load', function() {
  alert("image is loaded");
});
img.src = "img.jpg";
Скрипка

haynar · Accepted Answer · 2017-05-23 14:47:21

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

Tom Sarduy · Accepted Answer · 2016-05-03 01:55:15

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

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

user9319 · Accepted Answer · 2013-01-03 08:32:25

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

Noah Ellman · Accepted Answer · 2017-02-01 10:15:31

Я обнаружил, что вы можете просто сделать это в Chrome:
  $('.onload-fadein').each(function (k, v) {
    v.onload = function () {
        $(this).animate({opacity: 1}, 2000);
    };
    v.src = v.src;
});
настройка .src сам по себе вызовет событие onload.