Событие onload
 

Добрый вечер! Интересует вопрос по работе события onload.

Предположим мы имеем некий элемент на странице при клике по которому, у картинки на странице изменяем атрибут src. В обработчике click так же через метод load() отлавливаем событие загрузки данной картинки, что бы при ее загрузке обрадовать пользователя.

// Обработчик клика по некому  эл-ту страницы.
function click() {

     // Задаем нашей картинке новый путь.
     $("#myImg").attr("src", "Какой-то супер сервер/images/1.jpg");
     $("#myImg").load(alert("Супер все загрузилось!"));
}

Ситуация проста, но смущает в ней следующее, почему при первом вызове обработчика click событие load для картинки все равно происходит, ведь мы подписались на него уже ПОСЛЕ смены атрибута src. Т.е. по идее сначала должна произойти смена картинки, а уже ПОСЛЕ подписка на событие load? А получается что браузер не успев загрузить картинку уже выполнил следующую строчку кода и подписал нас на событие load. Проясните, пожалуйста, данную ситуацию.

браузеру какая разница что в блоке? блок есть? есть. загружен? загружен. алертуем? алертуем. а картинку он может искать годами

В смысле какая разница? Вы не поняли, мы назначаем Src, т.е. как я полагаю, сначала браузер должен загрузить картинку по указанному пути, а уже потом произойти подписка на load. Т.е. на момент подписки по идее, элемент img уже должен быть полностью загружен. А раз он уже полностью загружен, а только потом произошла подписка, то событие load при первом вызове обработчика click не должно произойти.

дело в том, что ты вешаешь событие после определения пути картинки и браузер кеширует эту картинку и считает загруженной. ты вешай ДО определения пути и будет счастье как тут

а если хочешь вешать после, то делай доп проверку, как тут:

$("#myImg").one('load', function() {
  alert('Image Loaded'); 
}).each(function() {
  if(this.complete) $(this).load();
});

В том то и дело. Что независимо от того, ДО или ПОСЛЕ произведена подписка, событие load происходит все равно!

Т.е. событие load произойдет как в этом случае! (Хотя по идее, при первом клике, как я считаю оно не должно произойти)

// Обработчик клика по некому  эл-ту страницы.
function click() {

     // Задаем нашей картинке новый путь.
     $("#myImg").attr("src", "Какой-то супер сервер/images/1.jpg");
     $("#myImg").load(alert("Супер все загрузилось!"));
}

так и в этом

// Обработчик клика по некому  эл-ту страницы.
function click() {

     $("#myImg").load(alert("Супер все загрузилось!"));
     // Задаем нашей картинке новый путь.
     $("#myImg").attr("src", "Какой-то супер сервер/images/1.jpg");
     
}