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

Question

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

这是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

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

除非我理解错误，否则这似乎和你预期的一样有效。它看起来像一个进度条——我刚刚用一个数据uri用一个蓝色框替换了你的代码。

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

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