jqueryエラーは "関数ではありません"

Question

このjQueryコードは、簡単なサムネイルギャラリーの一部です。ページ上のリンクをクリックすると、fancyboxに読み込まれます。プリローダー部分を追加すると、すべてが正常に見えますが、ファイヤーバグでエラーが発生します。$(imgSwap).preloadは機能ではありません。

私は何が不足しているのか、それともajaxを通じてファンシーに読み込まれているのか分かりません。

<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がすでに準備が整っている場合は、DOMを直ちに呼び出します。この場合、これは明らかです。

安全のため、使用する前にjQueryメソッド（ここでは$.fn.preload）を定義してください。