jquery - クロムで画像が表示されて消える

Question

私のウェブサイトでは、jQuery を使用して画像を含む div を変更します。

 <div class='bar1' >
    <div class='blocks'> <a href='#' >Home</a></div>
    <div class='blocks'> <a href='#'>About</a></div>
    <div class='blocks'><a href='#'>Zones</a></div>
    <div class='blocks'><a href='#'>Players</a></div>
 </div>
<div class='block-top-container'>
   <div class='scroll-block'>
      <img src='ban1/1.jpg' alt ='' />
   </div>
   <div class='scroll-block'>
     <img src='ban1/2.jpg' alt ='' />
   </div>
   <div class='scroll-block'>
      <img src='ban1/10.jpg' alt ='' />
    </div>
</div>

クリックしたリンクの画像を左に移動するjQueryコード

$(window).load(function() {

    $(".bar1  a").click(function(e){

    var $this = $(this);
    var index = $this.parent().index();
    var left = (index * $(" .scroll-block ").width());

    $(" .block-top-container ").animate({ marginLeft: -(left) }, 500);


    });

 });

エラーは Chrome (バージョン 23) で発生します。画像は読み込まれますが、ページの読み込みが完了すると画像が消え、壊れた画像のアイコンが表示されます。

ページがロードされたときに画像が表示されるChrome開発者ツールのネットワークタブを確認しましたが、ページのロードが完了すると画像が消え、ネットワークタブにImage Get Failedエラーが表示されます。