使用Javascript同步加载和显示多个动态GIF图像

Question

我并不是程序员，但我一直在尝试加载和显示一些gif动画，使它们从开头同时播放。换句话说，我需要它们同步播放。

我已经进行了许多谷歌搜索，发现这似乎可以在Chrome / Safari和Firefox中正常工作，但通常情况下，Internet Explorer无法与之协作。

我的当前代码如下：

var images = ["thephoto1", "thephoto2", "thephoto3", "thephoto4", "thephoto5"];

function initImages() {
    for (var i = 0; i < images.length; i++) {
        imageId = images[i];
        image = document.getElementById(imageId);
        image.style.visibility = "visible";
    }
}  

function preloadImages(urls) {
    var img = new Array();
    for (var i = 0; i < urls.length; i++) {
        img[img.length] = new Image();
        img[img.length - 1].src = urls[i];
    }
}

window.onload = function() {
    var img = new Array(
        "http://desmond.imageshack.us/Himg391/scaled.php?server=391&filename=countdown.gif&res=medium",
        "http://icanhascheezburger.files.wordpress.com/2010/11/funny-pictures-gif-cat-love.gif",
        "http://i52.photobucket.com/albums/g9/cpchick/Random%20Gifs/therock.gif",
        "http://www.mobileapples.com/Assets/Content/Screensavers/dc_1owy86mw.gif",
        "http://www.pptbackgrounds.fsnet.co.uk/images/powerpoint-countdown-u1.GIF"
    );
    preloadImages(img);
    initImages();
}

使用一些添加的 CSS：

.preload
    {
       visibility: hidden;
    }

这基本上是this和this script的结合。

你可以在这里查看一个实际的例子: http://jsfiddle.net/AN9uB/

一些可能有用的方法或文章：

• 使用JavaScript重新启动动画GIF而无需重新加载图像。
• 仅在加载时显示动画GIF的JavaScript。

然而，从阅读这些链接的评论中，我并不确定它们是否可行。

我使用的测试gif只是我找到的随机图像，需要注意的是，由于我需要测试各种大小和持续时间的gif，因此一些图像相当大。除了第一个倒计时图像只播放一次外，所有gif都循环播放。

有时，在使用Firefox 3.6.18查看页面时，第一个倒计时图像根本不会播放（它卡在10上），但是其他所有gif都同时加载和显示。

主要问题是我无法想出一种方法使Internet Explorer正常工作。我认为可以通过javascript预加载图像，然后刷新页面来解决这个问题。这是一个丑陋的解决方案，但我认为它会起作用。

Flash是执行此类操作的明显工具，但我正在制作这个项目的朋友只使用gif。

是否有更优雅的解决方案适用于所有主要浏览器？而且最好仅使用Javascript，而不是JQuery。

感谢任何帮助。

- crackerbear

---

new Array很丑，用[]代替吧 :p - hugomg

就像我之前提到的，我对编程完全是个新手，所以既然代码在兼容的浏览器中能够正常工作，我就保持了原样。 - crackerbear

你不需要解释自己 - 那只是一个小问题。 - hugomg

Answer 1

嗯，你并没有真正预加载图片，因为你只在页面加载后才调用preloadImages函数，也就是说，在实际的HTML中读取IMG标签之后，浏览器可能已经开始下载它们。最后一部分可能取决于visibility:hidden样式，但我不确定 - 至少我不希望所有浏览器都同意在这种情况下做什么。

此外，你在JavaScript和HTML中都定义了URL。这既是冗余的，而且以后更改起来也更困难。

我必须承认我不知道这是否会在任何地方正常工作，但你可以尝试：

1. 只在JavaScript中有图像URL - 等它们准备好后再将它们添加到HTML中

2. 使用JS Image对象上的onload事件处理程序来断言图像已加载。一旦它们全部加载完成，将它们添加到文档（即页面）中。

现在，我不知道特定的浏览器何时开始 gif 的动画时钟。如果它从 gif 被加载的那一刻开始，那么你无能为力，因为 gif 不会同时加载。然而，如果它们在放置在文档中时首先开始动画（这似乎很可能，但不能完全信任浏览器），那就有机会了。

// This function will add an array of images to div#images
function showImages(images) {
    var container = document.getElementById("images"); // get the #images div
    for( var i = 0, l = images.length ; i < l ; i++ ) {
        var img = document.createElement('IMG'); // create the IMG tag
        img.src = images[i].src; // set the src - the image should be preloaded when this happens
        container.appendChild(img); // add the IMG tag to the #images div
    }
}

// This one will create JS Image objects from an array of URLs
function loadImages(urls) {
    var remaining = urls.length; // the images still waiting to be fetched
    var images = []; // empty array to hold the created Image objects

    // this function will be called for Image object that is loaded
    var onloadHandler = function() {
        remaining--; // decrement the number of remaining images
        if( remaining < 1 ) {
            showImages(images); // if all images have loaded, add them to the page
        }
    };

    // create an Image object for each URL
    for( var i = 0, l = urls.length ; i < l ; i++ ) {
        var img = new Image();
        img.onload = onloadHandler; // set the onload-handler before setting the src
        img.src = urls[i];
        images.push(img); // add the Image object to the images array
    }
}

window.onload = function() {
    var urls = [
        "http://desmond.imageshack.us/Himg391/scaled.php?server=391&filename=countdown.gif&res=medium",
        "http://icanhascheezburger.files.wordpress.com/2010/11/funny-pictures-gif-cat-love.gif",
        "http://i52.photobucket.com/albums/g9/cpchick/Random%20Gifs/therock.gif",
        "http://www.mobileapples.com/Assets/Content/Screensavers/dc_1owy86mw.gif",
        "http://www.pptbackgrounds.fsnet.co.uk/images/powerpoint-countdown-u1.GIF"
    ];
    loadImages(urls);
};

这是一个 jsfiddle 的链接：http://jsfiddle.net/Frqys/2/

不过，我不确定它能在所有浏览器上正常工作。在 Mac OS 上的 Safari、Chrome 和 Firefox 测试看起来都可以，但无法确定其他平台。建议您将 gif 文件复制多次，并为每个文件命名不同的名称，以便它具有唯一的 URL。这样可以防止缓存，并保持其动画时钟分离。然后尝试加载所有这些 GIF，而不是大量不同的 GIF，看看它们是否保持同步。

- Flambino

---

谢谢回复，但是很遗憾从我的测试来看，在Internet Explorer 8中它不起作用。似乎IE8要么忽略了javascript，要么就像你所说的，在gif放置在文档之前启动了动画时钟。 - crackerbear

@crackerbear：好吧，非常遗憾，但这值得一试。 - Flambino