Как создать серию изображений с 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 image:

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

Я не думаю, что это актуально, но я использую Django для создания этого веб-сайта и bootstrap, и пока на этой странице нет кода CSS.

Просто любая помощь будет очень признательна.

Answer 1

Мне трудно сгенерировать 10 маленьких квадратов (каждую 1 секунду) в строке, которые имитировали бы пиксели на полосе загрузки, при этом они отображались бы прямо под другим изображением кролика. Прямо сейчас он работает, но они кажутся образующими вертикальную линию вместо ряда.

Кажется, это работает так, как вы ожидаете, если я не неправильно понимаю. он выглядит как индикатор выполнения - я просто заменил ваш код синим полем, используя URI данных.

Вы можете увидеть это здесь https://codesandbox.io/s/peaceful-wilbur-d2tuf?file= / index. html '

Возможно ли, что у вас есть другой код / ​​стили, мешающие результату?