如何创建一系列 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 构建此网站和 bootstrap，到目前为止，此页面中没有 CSS 代码。

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

Answer 1

I'm having a tough time trying to generate 10 little squares (every 1 second) in a row that would simulate pixels in a loading bar, while having them appear just under another image of a rabbit. Right now it's working but they appear forming a vertical line instead of a row.

除非我理解有误，否则这似乎如您所愿。它看起来像一个进度条 - 我只是用一个使用数据 uri 的蓝色框替换了你的代码。

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

是否有其他 code/styles 干扰结果？

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

How to create a series of images with Javascript to form loading screen under another image?

html

javascript

frontend

web-site-project

web