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

Question

У меня есть фреймворк (vue.js), вставляющий некоторые изображения при изменении страницы (с маршрутизатором, а не с реальным обновлением страницы). При загрузке непосредственно, я могу сделать страницу отображения экрана загрузки:

loading = true; 
$(window).on('load', function(){ 
    loading = false; 
}); 

Однако $(window).on('load') не срабатывает, если страница была навигация с помощью рамки. Это (я предполагаю), потому что window уже загружен, а загрузка новых изображений больше не привязана к окну. Таким образом, loading = false никогда не запускается, потому что окно уже загружено.

Вот весьма упрощенный пример, но он иллюстрирует ту же точку:

//Loading the initial image, it works fine because it runs on window load. 
console.log('Loading first image...') 
$(window).on('load',function(){ 
    console.log('First image loaded'); 
}); 


$('button').on('click',function(){ 
    $('div').append('<img src="https://placekitten.com/200/300">'); 
    console.log('Loading extra image...'); 

    //This never triggers because the window is already loaded. 
    //I need something to trigger while the appended images are loading 
    $(window).on('load',function(){ 
    console.log('Extra image loaded.'); 
    }); 

}); 

HTML:

<img src="https://placekitten.com/200/300"> 
<button>Click to load extra</button> 
<div></div> 

Вот codepen.

Answer 1

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

Вот моя функция JS (идет с HTML от моей должности):

$('button').on('click',function(){ 
     $('div').html('<img src="https://placekitten.com/200/400"><img src="https://placekitten.com/100/300">'); 
     var loadingImages = []; 
     //Array of existing images 
     var arrayOfImages = $('div').find('img'); 
     //Loops through array 
     for(var i=0; i < arrayOfImages.length; i++){ 
      //Creates numerical value for each image, puts it in an array of images that are currently loading 
      loadingImages.push(i); 

      //For each image, add a load listener. Pass in i from the for loop so that it gets recorded in the event listener. 
      $(arrayOfImages[i]).on('load', { currentImage: i }, function(event){ 
       //On load, removes the value from the array. Display which image loaded, for debugging. 
       var index = loadingImages.indexOf(event.data.currentImage); 
       loadingImages.splice(index, 1); 
       console.log('image '+event.data.currentImage+' loaded'); 

       //Checks if the array is empty (last image loaded). If so, log all. 
       if(loadingImages.length === 0){ 
        console.log('all loaded'); 
       } 
      }); 

     } 

}); 

Это имеет преимущество, будучи в состоянии перебрать все уже изображения в контейнере, а не обязательно полагаться на время в состоянии указать атрибут данных в добавляемом html. Также можно иметь дело с «группами» изображений, то есть несколькими изображениями в одной и той же строке HTML. Так что, вероятно, более расширяемый.

Это имеет недостаток, заключающийся в невозможности загрузки дополнительных изображений после прохождения первого набора, например, если .html() был заменен на .append(). Исходные изображения все равно будут существовать, полностью загружены, поэтому их значения останутся в массиве. Вероятно, это может быть исправлено с некоторыми делами, если это необходимо (мне приходилось загружать только один набор изображений за раз).

Вот codepen демонстрирует это: http://codepen.io/Blue_Dragon360/pen/GqjyGJ?editors=1010

Answer 2

Вы можете добавить .load() слушателя к каждому новому изображению с уникальным идентификатором, и отслеживать их с массивом, который можно использовать для запуска функции, как только все изображения загружаются:

var loadingImages = []; 
$('button').on('click',function(){ 

    //Get unique identifier + add to 'loading' 
    var n = $('div').find("img").length; 
    loadingImages.push(n); 

    //Add image with unique classname 
    $('div').append('<img data-n="'+n+'" src="https://placekitten.com/200/300">'); 

    //Attach load listener to new image 
    $('div').find("img[data-n="+n+"]").load(function(){ 
    var n = $(this).attr('data-n'); 

    //Remove from 'loading' 
    var index = loadingImages.indexOf(n); 
    loadingImages.splice(index, 1); 

    //if 'loading' empty, run function 
    if(loadingImages.length==0){ 
     alert("Loaded All Images"); 
    } 
    }); 
}); 

Пример : JSFiddle