웹 사이트 로더 진행 막대 이미지 자바 스크립트 및 Jquery 사용

Question

그래서 웹 사이트 프리 로더를 만들려고하고 있지만 전체 웹 사이트에 기능을로드하고 $ (창)을로드하는 대신 ID의 특정 요소를 타겟팅하고 싶습니다. 수업.

나는 같은 것을 할 수 있어요 : 모든 세 개의 이미지가 '루프'의 끝에서, 즉로드 할 때 나는 로더를 페이드 아웃하고

var ImgArray = ["#img1","#img2","#img3"]; 

      for(var i = 0 ; i < ImgArray.length; i++) { 
       var name = ImgArray[i]; 

       $(name).load(function() { 


        //var nameNew = name;// name is a string, passed by Reference 

        alert(name); 

        //$(this).show(); 

       }); 
      } 

$('.loader').fadeOut(); 

. 그러나 여전히이 코드는 잘 작동하지 않습니다. 세 이미지가 모두로드되기 전에 로더가 사라집니다. 의 이름이 인 것을 알리려고하면 # img3이 항상 표시되지만 이유는 무엇입니까? 배열의 모든 이미지가로드 될 때 루프의 끝에서 로더를 페이드하는 방법과 코드를 도와주세요. ?

Answer 1

모든 이미지가로드되기 전에 페이드가 발생하는 이유는 콜백이 완료되기 전에 .fadeOut()이 발생하기 때문입니다. 또한 jQuery의 어떤 버전을 사용하고 있습니까? -event의 onload -event에 대한 .load()은 버전 1.8에서 더 이상 사용되지 않습니다. 대신 .on('load', handler)을 사용해야합니다.

약속을 사용하여 코드를 작성합니다. 체크 아웃 https://github.com/kriskowal/q 및 https://github.com/gre/qimage

그리고 코드는

Q.all([Qimage(img1Url),Qimage(img2Url),Qimage(img3Url)]).spread(function(img1,img2,img3){ 
    $('#imageContainer').append(img1); 
    $('#imageContainer').append(img2); 
    $('#imageContainer').append(img3); 
    $('.loader').fadeOut(); 
},function(error){ 
    console.error(error); 
}); 

과 같을 것