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");

...你是將數據加載到jpeg文件中作爲#fish元素中的文本 - 也就是說，您正在嘗試在記事本中打開jpeg文件。

你可能想要做的是有一個<img>元素，並將其src到JPEG文件 - 改變<div>是一個<img>或<div>內添加<img>：

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

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

注意，對於平滑的動畫你可能想「預先加載」所有的圖像，然後在之後使用setInterval()來切換它們。

來源

2017-02-19 04:27:05 nnnnnn

啊我看到。完善！謝謝。 – practicemakesperfect

好吧，當你說「預先加載」所有的圖像 - 我不是已經用'$（window）.on（「load」，function（）{...};）''做了，或者還有別的我應該做？ – practicemakesperfect

在JS運行之前，瀏覽器並不知道你的魚jpegs，所以直到你將src設置爲該圖片的URL，它纔會開始下載任何給定的圖片。如果只有四個jpeg，則可以更容易地將它們創建爲單獨的''元素，這些元素開始用CSS隱藏，然後使用JS更改樣式以逐個顯示它們，因爲隨後窗口處於加載功能將在圖像全部下載後運行*。或者，有些方法可以從JS中「預加載」它們，但是我無法在評論中找到它們...... – nnnnnn

JavaScript setInterval動畫在控制檯中創建沒有錯誤的亂碼

回答

相關問題