为什么使用JavaScript加载图像序列有问题？

我在我的网站上加载了一系列图片（50张图片），尽管它在本地运行良好，但在网站正常运行时，它确实很慢/错误。我不认为这是优化图像的问题，因为它们在文件大小上已经相当小。（每个68kb，总共为1MB）。另外在我的网站上加载4MB gif来自同一主机的速度更快。有什么我可以改变我的代码来改善这一点？为什么使用JavaScript加载图像序列有问题？

这是我目前有：（对JavaScript的）

 $(document).ready(function(){ 
     var counter = 1; 
     setInterval(function(){ 
      var src = 'spacefox_TT/'; 
      $('#animation').attr('src' , src+counter+'.jpg'); 
      counter++; 
      if(counter > 49){ 
       counter = 1 
      } 
     }, 50); 
    });

我的HTML是相当简单的，看起来是这样的：

<img id="animation" src="spacefox_TT/1.jpg">

因此，剧本只是递增的JPG文件，直到49并重复。

对不起，如果这不明确，任何帮助！在此先感谢

来源

2017-02-12 sterz

你是否试图每'50ms'连锁'img''src'？在设置下一个'src'之前'javascript'在Question不会等待'img'的'load'完成。 – guest271314

嗨！我并没有试图每50ms链接一次。我不确定如何修改javascript，以便在设置下一个src之前加载img ... – sterz

每个图像应显示的持续时间是多少？ – guest271314

将这些图像从服务器下载到用户的浏览器需要一些时间，这就是为什么它首先会显示为越野车。我建议你使用gif，而不是每隔50ms尝试更改图像的src。这样动画在加载之前不会启动。你的方法不是越野车，一般来说效率不高。

如果你真的想使用你的方法，那么我建议你使用jQuery的onload。您可以将setInterval包装到某个功能中，并且只有在加载完所有图像后才执行该功能。

来源

2017-02-12 22:03:42 ruler23

我不想使用gif，因为我不想牺牲图像的质量。很高兴知道onload！谢谢 – sterz

如果您打开浏览器的开发人员工具并观看网络选项卡，您会发现您实际上是在等待数千个浏览器无法像您一样快速处理的图像请求，重新添加它们。

您有几个选择，但有一点需要记住的是即使您拉动更大的文件，网络请求的性能通常也会更好。

所以我推荐的是将你的50张图片链接成一张非常宽的图片（即50张相同尺寸的并排图片）。你的基本HTML应该是这样的：

<div class='image-frame'> 
    <img src='/image.jpg' alt='Product Image reel' /> 
</div>

然后你的基地CSS可能是这样的：

.crop { 
    width: 200px; 
    height: 150px; 
    overflow: hidden; 
} 

.crop img { 
    width: 400px; 
    height: 300px; 
    margin: -75px 0 0 -100px; 
}

而且你可以使用JavaScript来消极和积极的保证金适用于图像的图像之间进行切换。请注意，宽度和边距以及内容需要根据您使用的框架大小进行调整，我没有仔细查看您当前拥有的图像。

来源

2017-02-12 22:17:54 Paul

谢谢，这个回应很有帮助！ – sterz

为什么使用JavaScript加载图像序列有问题？

回答

相关问题