Question

我正在尝试用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>

Answer 1

当你这样说时：

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

...您正在jpeg文件中将数据作为#fish元素中的文本加载 - 也就是说，您正在尝试在记事本中打开jpeg文件。

您可能想要做的是拥有<img>元素并将其src设置为该jpeg文件 - 将<div>更改为<img>或添加<img>中的<div>：

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

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

请注意，对于流畅的动画，您可能希望＆＃34; preload＆＃34;所有图片，然后在之后使用setInterval() 来切换它们。

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

1 个答案: