JavaScript setIntervalアニメーションは、コンソールでエラーなくちょっと変わったものを作成します

私はsetIntervalで単純なアニメーションを作成しようとしています。以前にいくつかのクロスオリジンの問題があったのでPython SimpleHTTPServerでテストしています。ページを読み込んだときにコンソールにエラーはなく、ローディングオーバーレイが正しく表示され、コンソールには画像が正しく読み込まれているように見えますが、ページはちょうど不安定になります（下の画像を参照）。私は何が間違っているのだろうかと思います。ありがとう！JavaScript setIntervalアニメーションは、コンソールでエラーなくちょっと変わったものを作成します

（ちんぷんかんぷんは本当に長いので、このスクリーンショットは、それのほんの一部です。）

<!DOCTYPE html> 
<html> 
    <html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>fish</title> 
     <link rel="stylesheet" type="text/css" href="./assets/style.css"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    </head> 
    <body> 
     <div id="overlay"> 
      <img src="http://i.imgur.com/KUJoe.gif"> 
     </div> 
     <div id="fish" style="width:100px; height:100px;"></div> 
     <script type="text/javascript"> 
      $(window).on("load", function(){ 
       $("#overlay").fadeOut(); 
       var r = 1; 
       setInterval(function(){ 
        if (r < 5) { 
         $("#fish").load("./assets/images/fish" + r + ".jpeg"); 
         r++; 
        } else { 
         r = 1; 
        } 
        console.log(r); 
        console.log("./assets/images/fish" + r + ".jpeg"); 
       }, 100); 
      }); 
     </script> 
    </body> 
</html>

出典

2017-02-19 practicemakesperfect

エンコーディングが 'utf-8'であることを示していますが、実際にそのエンコーディングを使用してファイルを保存したことは確かですか？ –

@ScottMarcusはい、もう一度、私が確認したことを確かめるために – practicemakesperfect

あなたがこれを言う：

$("#fish").load("./assets/images/fish" + r + ".jpeg");

...あなたは#fish要素内のテキストとしてjpegファイルのデータを読み込みます。つまり、メモ帳でjpegファイルを開こうとしているのと同じことをしています。用することを

<div style="width:100px; height:100px;"><img id="fish"></div> 

// and then 
$("#fish").prop("src", "./assets/images/fish" + r + ".jpeg");

注：いずれか<img>であるか、または<div>内<img>を追加する<div>を変更する - あなたはおそらく何をしたいのか

は<img>要素を持っており、そのJPEGファイルにそのsrcを設定していますスムーズなアニメーションを作成するには、すべての画像を「プリロード」し、次にの後にsetInterval()を使用して切り替えます。

出典

2017-02-19 04:27:05 nnnnnn

を確認しました。完璧！ありがとう。 – practicemakesperfect

あなたがすべての画像を最初に "プリロードする"と言うとき、私は '$（window）.on（" load "、function（）{...};）'でそれをしていません。私は。。。をするべきです？ – practicemakesperfect

ブラウザは、JSが実行されるまであなたの魚のjpegについて知りません。そのため、画像のURLに 'src'を設定するまで、画像のダウンロードを開始しません。 jpegが4つしかない場合は、CSSで隠された個々の「」要素を作成してから、JSを使用してスタイルを変更して一度に1つずつ表示する方が簡単かもしれません。画像がすべてダウンロードされた後に*実行されます。代わりに、私はコメントに収まることができないJSからそれらを "プリロードする"方法があります... – nnnnnn

JavaScript setIntervalアニメーションは、コンソールでエラーなくちょっと変わったものを作成します

答えて

関連する問題