JavaScript setInterval 动画在控制台中创建乱码而没有错误答案

【问题标题】：JavaScript setInterval animation creates gibberish without error in the consoleJavaScript setInterval 动画在控制台中创建乱码而没有错误
【发布时间】：2017-07-08 11:53:13
【问题描述】：

我正在尝试使用setInterval 创建一个简单的动画，并且我正在 Python SimpleHTTPServer 上对其进行测试，因为我之前遇到了一些跨域问题。加载页面时控制台没有错误，我可以正确看到加载覆盖，然后页面变得乱码（见下图），尽管控制台显示它正在正确加载图像。我想知道有什么问题。谢谢！

（废话真的很长，所以这个截图只是其中的一部分。）

<!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>

【问题讨论】：

虽然您指出编码是utf-8，但您确定您确实使用该编码保存了文件吗？
@ScottMarcus 是的，我刚刚再次检查以确保

标签： javascript jquery image animation

【解决方案1】：

当你这样说时：

$("#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()之后在它们之间切换。

【讨论】：

好吧，当你先说“预加载”所有图像时 - 我不是已经用 $(window).on("load", function(){...};) 做到了，还是我应该做其他事情？
在 JS 运行之前，浏览器不知道您的鱼 jpeg，因此在您将 src 设置为该图像的 URL 之前，它不会开始下载任何给定的图像。如果只有四个 jpeg，那么将它们创建为单独的 <img> 元素可能会更容易，这些元素一开始是用 CSS 隐藏的，然后使用 JS 更改样式以一次显示一个，因为加载时的窗口功能将在图像全部下载后运行。或者，有一些方法可以从 JS 中“预加载”它们，我无法在评论中添加它们......
不，还有更多图片——可能有 50 张。好的，我将研究“预加载”选项。谢谢！
酷。显然，如果您遇到预加载问题，您可以提出另一个问题，但我认为这与该问题的内容不同。