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

拉斐尔·洛佩斯·阿巴斯卡尔

我在尝试连续生成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代码。

只是任何形式的帮助将得到高度赞赏。

拉玛凯

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

除非我误解了,否则这似乎正在按您的预期进行。它看起来像进度条-我只是使用数据uri用蓝色框替换了您的代码。

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在php中将一系列图像转换为一个pdf文档

来自分类Dev

如何在php中将一系列图像转换为一个pdf文档

来自分类Dev

如何将一个数组中的一系列值除以另一个数组中的一系列值

来自分类Dev

如何检查另一个列表中是否存在包含一系列项目的列表

来自分类Dev

在Matlab中根据一系列图像创建视频

来自分类Dev

当显示另一个div时下推一系列div

来自分类Dev

生成最接近另一个数字百的一系列数字

来自分类Dev

如果图像出现问题,如何使JavaScript旋转一系列图像

来自分类Dev

我的Greasemonkey脚本开始加载一系列图像。在需要时如何停止?

来自分类Dev

如何从一系列图像生成PDF?

来自分类Dev

如何从一系列具有不同帧频的图像创建视频?

来自分类Dev

是否可以使用FFMPEG创建持续时间持续较短的一系列图像?

来自分类Dev

FFMPEG-无法使用RGB24像素格式的一系列图像创建视频

来自分类Dev

如何从列表中选择一个元素,并将其与同一系列的另一个元素进行比较?

来自分类Dev

如何在C++中的字符串中打印从一个索引到另一个索引的一系列字符

来自分类Dev

A-frame:通过单击隐藏另一个系列后显示一系列元素

来自分类Dev

如何创建一个简单的脚本(在Linux中)执行一系列命令?

来自分类Dev

如何使用画布将一个图像粘贴到另一个图像?

来自分类Dev

如何在另一个HTML文件中使用动态创建的图像?

来自分类Dev

PHPExcel:如何从一行或一系列单元格中获取样式并将其应用于另一个

来自分类Dev

PHPExcel:如何从一行或一系列单元格中获取样式并将其应用于另一个

来自分类Dev

如何从另一个给定的图像恢复图像

来自分类Dev

如何编写一个使用RSpec遍历一系列值的测试?

来自分类Dev

如何使用 R 在一个分布中分布一系列卷

来自分类Dev

使用jQuery在另一个div中使用图像的src创建新的图像元素

来自分类Dev

使用jQuery在另一个div中使用图像的src创建新的图像元素

来自分类Dev

为变量的每个值将一系列值添加到另一个变量

来自分类Dev

如何使用JavaScript在另一个页面中获取图像src?

来自分类Dev

如何保护excel文件中的一系列单元格免受另一个(其中包含vba代码)的影响?

Related 相关文章

  1. 1

    如何在php中将一系列图像转换为一个pdf文档

  2. 2

    如何在php中将一系列图像转换为一个pdf文档

  3. 3

    如何将一个数组中的一系列值除以另一个数组中的一系列值

  4. 4

    如何检查另一个列表中是否存在包含一系列项目的列表

  5. 5

    在Matlab中根据一系列图像创建视频

  6. 6

    当显示另一个div时下推一系列div

  7. 7

    生成最接近另一个数字百的一系列数字

  8. 8

    如果图像出现问题,如何使JavaScript旋转一系列图像

  9. 9

    我的Greasemonkey脚本开始加载一系列图像。在需要时如何停止?

  10. 10

    如何从一系列图像生成PDF?

  11. 11

    如何从一系列具有不同帧频的图像创建视频?

  12. 12

    是否可以使用FFMPEG创建持续时间持续较短的一系列图像?

  13. 13

    FFMPEG-无法使用RGB24像素格式的一系列图像创建视频

  14. 14

    如何从列表中选择一个元素,并将其与同一系列的另一个元素进行比较?

  15. 15

    如何在C++中的字符串中打印从一个索引到另一个索引的一系列字符

  16. 16

    A-frame:通过单击隐藏另一个系列后显示一系列元素

  17. 17

    如何创建一个简单的脚本(在Linux中)执行一系列命令?

  18. 18

    如何使用画布将一个图像粘贴到另一个图像?

  19. 19

    如何在另一个HTML文件中使用动态创建的图像?

  20. 20

    PHPExcel:如何从一行或一系列单元格中获取样式并将其应用于另一个

  21. 21

    PHPExcel:如何从一行或一系列单元格中获取样式并将其应用于另一个

  22. 22

    如何从另一个给定的图像恢复图像

  23. 23

    如何编写一个使用RSpec遍历一系列值的测试?

  24. 24

    如何使用 R 在一个分布中分布一系列卷

  25. 25

    使用jQuery在另一个div中使用图像的src创建新的图像元素

  26. 26

    使用jQuery在另一个div中使用图像的src创建新的图像元素

  27. 27

    为变量的每个值将一系列值添加到另一个变量

  28. 28

    如何使用JavaScript在另一个页面中获取图像src?

  29. 29

    如何保护excel文件中的一系列单元格免受另一个(其中包含vba代码)的影响?

热门标签

归档