窗口本身已加載后，如何觸發加載事件？

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

您可以為每個具有唯一標識符的新圖像添加.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

Answer 2

@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