我正在尝试使用 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>
最佳答案
当你这样说时:
$("#fish").load("./assets/images/fish" + r + ".jpeg");
...您正在将 jpeg 文件中的数据作为 #fish 内的文本加载。 element - 也就是说，您所做的相当于尝试在记事本中打开 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");
请注意，为了获得流畅的动画效果，您可能需要“预加载”所有图像，然后使用 setInterval() 之后在它们之间切换。
关于JavaScript setInterval 动画在控制台中创建乱码，但没有错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42323605/