jQuery/JavaScript가 항상 실행되지 않습니다.

Question

image_1 및 image_2가 완전히로드 된 후 콘텐츠를 표시하려고합니다. 그러나 예상대로 작동하지 않습니다.

var loading = 0; 

(function() { 
    $(".image_1").on('load', function() { 
    console.log('loading image_1'); 
    loading++; 
    checkLoading(); 
    }); 

    $(".image_2").on('load', function() { 
    console.log('loading image_2'); 
    loading++; 
    checkLoading(); 
    }); 
})(); 

function checkLoading() { 
    console.log('inside Loading check'); 
    if (loading == 2) { 
    console.log('loading done' + loading); 
    $('#loader-wrapper').fadeOut('fast').remove(); 
    } 
} 

이 기능은 항상 작동하지 않습니다. 그것은 PHP 파일의 바닥 글에 추가됩니다.

경우에 따라 # loader-wrapper가 성공적으로 제거됩니다. 그러나 다른 경우에는 #loader-wrapper가 DOM에서 제거되지 않고 그 시간에 console.log 정보가 표시되지 않습니다.

Answer 1

스크립트를 바닥 글 (문서 끝)에 배치 했으므로 스크립트를 시작하기 전에 이미지가 이미로드되어있는 것이 가장 좋습니다. 따라서 스크립트가 시작된 후에로드 이벤트가 단순히 발생하지 않으므로 .on("load", function(){이 실행되지 않을 것이라고 생각하지 않습니다 (이미 있습니다).

그들이 (jsfiddle)도 이미지 후 스크립트를로드로 내가 여기에 약간의 데모 바이올린을했습니다

: this is the fiddle

것은 (전) 이전 함수를 호출하려고 이미지를 이것이 해결되지 않으면 참조 너의 문제.