优化javascript图像动画的性能

Question

I've got a question in regards to javascript and dynamically displaying images to form an animation. 我有一个关于javascript和动态显示图像以形成动画的问题。 The pictures I have are around 1360x768 in size and quite big despite being .png pics. 我的图片尺寸约为1360x768，尽管是.png图片，但尺寸仍然很大。

I've come up with a code for switching out the pics dynamically, but even run on a local webserver it is too slow (thus sometimes I see the pic being built). 我想出了用于动态切换图片的代码，但是即使在本地Web服务器上运行也太慢了（因此有时我看到图片正在构建）。

So my question is: is there a better way to do this than dynamically switching out the "src" part of the image tag, or is there something else that could be done in combination with that, to make sure that the user doesn't have any strange phenomenons on the client? 所以我的问题是：是否有比动态切换image标记的“ src”部分更好的方法，或者还有其他可以与之结合的方法，以确保用户不会客户有什么奇怪的现象吗？

<script>
var title_index = 0;

function display_title()
{
    document.getElementById('picture').src=
        "pics/title_" + title_index + '.png';
    if (title_index < 100) {
            title_index = title_index + 5;
            setTimeout(display_title,3000);
        }

}
</script>
<body onload="setTimeout(display_image,3000)">
    <image  id="picture" src="pic/title_0.png"/>
</body>

Thanks. 谢谢。

Answer 1

I've had this problem too, even when preloading the images into the cache, 我也遇到了这个问题，即使将图像预加载到缓存中时，

Google's The Hobbit experiment does something interesting. Google的霍比特人实验做了一些有趣的事情。 They do low resolution while animating and switch it for a hiresolution if you "pause" (stop scolling in the case of The Hobbit experiment). 它们会在动画时执行低分辨率，如果您“暂停”，则将其切换为高分辨率（在《霍比特人》实验的情况下，不要再拖延了）。 They also use the HTML5 canvas tag to smooth out the animation. 他们还使用HTML5 canvas标签来平滑动画。

Here's their blog post about their method: 这是他们关于方法的博客文章：

http://www.html5rocks.com/en/tutorials/casestudies/hobbit-front-end/ http://www.html5rocks.com/zh-CN/tutorials/casestudies/hobbit-front-end/

Their end product: 他们的最终产品：

http://middle-earth.thehobbit.com http://middle-earth.thehobbit.com

Edit: Pre loading example: 编辑：预加载示例：

<!Doctype html>
  <head>
    <title>test</title>
  </head>
<body>

<canvas id="myCanvas" width="1360" height="768"></canvas>
<script type="text/javascript">
      var images = {};
      var loadedImages = 0;
      var numImages = 0;
      var context = '';
      function loadImages(sources, callback)
      {
        // get num of sources
        for(var src in sources)
        {
          numImages++;
        }
        for(var src in sources)
        {
          images[src] = new Image();
          images[src].onload = function()
          {
            if(++loadedImages >= numImages)
            {
              callback(images);
            }
          };
          images[src].src = sources[src];
        }
      }

      var canvas = document.getElementById('myCanvas');
      context = canvas.getContext('2d');
      var sources =
      {
        frame0: 'http://piggyandmoo.com/0001.png',
        frame1: 'http://piggyandmoo.com/0002.png',
        frame2: 'http://piggyandmoo.com/0003.png',
        frame3: 'http://piggyandmoo.com/0004.png',
        frame4: 'http://piggyandmoo.com/0005.png',
        frame5: 'http://piggyandmoo.com/0006.png',
        frame5: 'http://piggyandmoo.com/0007.png',
        frame5: 'http://piggyandmoo.com/0008.png',
        frame5: 'http://piggyandmoo.com/0009.png' 
      };
      var width = 1360;
      var height = 768;
      var inter = '';
      var i = 0;
      function next_frame()
      {
        if(numImages > i)
        {
          context.drawImage(images['frame' + (i++)], 0, 0);
        } 
        else
        {
           clearInterval(inter);
        }
      }

      loadImages(sources, function(images)
      {
        //animate using set_timeout or some such...
          inter = setInterval(function()
          {
            next_frame();
          }, 1000);
      });

</script>
</body>

Code modified from: www.html5canvastutorials.com/tutorials/html5-canvas-image-loader/ 代码修改自：www.html5canvastutorials.com/tutorials/html5-canvas-image-loader/

Answer 2

You could overcome this issue by preloading the images on page load. 您可以通过在页面加载时预加载图像来解决此问题。 This means that the images would then be stored in memory and immediately available to you. 这意味着图像将随后存储在内存中，并立即可供您使用。 Take a look at the following: 看一下以下内容：

JavaScript Preloading Images JavaScript预加载图像

http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/ http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/

优化javascript图像动画的性能

问题描述

2 个解决方案

解决方案1
2 已采纳 2014-02-28 15:51:59

解决方案2
1 2014-02-28 15:49:17

优化javascript图像动画的性能

问题描述

2 个解决方案

解决方案1 2 已采纳 2014-02-28 15:51:59

解决方案2 1 2014-02-28 15:49:17

解决方案1
2 已采纳 2014-02-28 15:51:59

解决方案2
1 2014-02-28 15:49:17