창 자체가로드 된 후 로딩 이벤트를 트리거하는 방법은 무엇입니까?

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입니다.

당신은 고유 식별자로 각각의 새로운 이미지에 .load() 리스너를 추가, 당신은 한 번에 모든 이미지를로드하는 기능을 실행하는 데 사용할 수있는 배열을 추적 할 수 있습니다

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()으로 바뀌는 경우와 같이 첫 번째 세트를 통과 한 후에 추가 이미지를로드 할 수 없다는 단점이 있습니다. 원본 이미지는 여전히로드되어 완전히로드되어 해당 값이 배열에 유지됩니다. 필요한 경우 (아마도 한 번에 한 세트의 이미지 만로드해야 함)이 작업은 일부 작업으로 수정 될 수 있습니다. `,`$ (창) .trigger ('로드') : http://codepen.io/Blue_Dragon360/pen/GqjyGJ?editors=1010

이 작동하는 경우

Answer 2

:

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