如何使用 Javascript 创建一系列图像以在另一个图像下形成加载屏幕？

Question

我很难尝试连续生成 10 个小方块（每 1 秒）来模拟加载栏中的像素，同时让它们出现在另一个兔子图像的下方。现在它正在工作，但它们似乎形成了一条垂直线而不是一行。

这是javascript代码：

var rabbit = document.getElementById("rabbit");

  for(var i=0; i < 10; i++){
   setTimeout(() => {
   var pixel = document.createElement('img');
   pixel.setAttribute('src', 'static/images/test/pixel.png');
   pixel.setAttribute('height', '10px');
   pixel.style.marginLeft = "10px";
   document.body.appendChild(pixel);
  rabbit.after(pixel);
}, i*1000+1500);
}

这是兔子图片的 HTML 标签：

   <img id='rabbit' src='{% static 'images/cartelera_home/ghost.gif' %}' alt='' style='height:0px'>

我认为这无关紧要，但是我正在使用 Django 来构建这个网站和引导程序，并且到目前为止这个页面中还没有 CSS 代码。

只要任何形式的帮助，我们将不胜感激。

Answer 1

我很难尝试连续生成 10 个小方块（每 1 秒）来模拟加载栏中的像素，同时让它们出现在另一个兔子图像的下方。现在它正在工作，但它们似乎形成了一条垂直线而不是一行。

这似乎按您的预期工作，除非我误解了。它看起来像一个进度条 - 我刚刚使用数据 uri 将您的代码替换为蓝色框。

你可以在这里看到 https://codesandbox.io/s/peaceful-wilbur-d2tuf?file=/index.html'

您是否可能有其他代码/样式干扰结果？