jquery error "is not a function"

Question

이 jQuery 코드는 간단한 축소판 갤러리의 일부입니다. 페이지의 링크를 클릭하면 fancybox에로드됩니다. 프리 로더 부분을 추가하면 모든 것이 정상적으로 보이지만 방화 광에서 오류가 발생합니다. $(imgSwap).preload은 기능이 아닙니다.

제가 누락 된 부분이 무엇인지, 아니면 아약스를 통해로드되고 있는지 확실하지 않습니다.

<script type="text/javascript"> 
$(document).ready(function() { 
    // Image swap on hover 
    $("#gallery li img").hover(function(){ 
     $('#main-img').attr('src',$(this).attr('src')); 
    }); 
    // Image preload 
    var imgSwap = []; 
    $("#gallery li img").each(function(){ 
     imgUrl = this.src; 
     imgSwap.push(imgUrl); 
    }); 
    $(imgSwap).preload(); 
}); 
$.fn.preload = function() { 
    this.each(function(){ 
     $('<img/>')[0].src = this; 
    }); 
} 
</script> 


    <div id="gallery"> 
     <img src="http://photos2.img.ie/Full-10176257.jpeg" alt="" id="main-img" width="290px" height="200px"/> 
     <ul> 
      <li><img src="http://photos2.img.ie/Full-10176257.jpeg" alt="" width="69px" height="52" /></li> 
      <li><img src="http://photos2.img.ie/Full-10176258.jpeg" alt="" width="69px" height="52" /></li> 
      <li><img src="http://photos2.img.ie/Full-10176259.jpeg" alt="" width="69px" height="52" /></li> 
      <li><img src="http://photos2.img.ie/Full-10176260.jpeg" alt="" width="69px" height="52" /></li> 
      <li><img src="http://photos2.img.ie/Full-10176262.jpeg" alt="" width="69px" height="52" /></li> 
      <li><img src="http://photos2.img.ie/Full-10176256.jpeg" alt="" width="69px" height="52" /></li> 
     </ul> 
    </div>  

Answer 1

아마도 선언 전에 preload 함수를 호출하고 있습니다. 코드 상단에서 해당 함수를 선언 한 다음 preload 함수를 호출하십시오.

Answer 2

$(document).ready DOM 준비가되면 콜백을 호출합니다. 또는 DOM이 이미 준비되어 있으면 바로 호출 할 수 있습니다. 이 경우 분명히 그렇습니다.

안전을 위해 사용하기 전에 jQuery 메서드 (여기 $.fn.preload)를 정의하십시오.