javascript - 使用 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/

一些可能的方法或可能有用的帖子:

• Restart an animated GIF from JavaScript without reloading the image.
• Javascript to only display animated gif when loaded.

但是，通过阅读这些链接上的评论，我不能完全确定它们是否可行。

我使用的测试 gif 只是我发现的随机图像和一个小的预警，一些图像相当大，因为我需要测试各种大小和持续时间不等的 gif。除了只播放一次的第一个倒计时图像外，所有 gif 都循环播放。

在某些情况下，当使用 Firefox 3.6.18 查看页面时，第一个倒计时图像根本不播放(它停留在 10)，但在其他情况下，其余的 gif 图像都会同时加载和显示。

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

Flash 是做这种事情的明显工具，但我做这个的 friend 只使用 gifs。

是否有适用于所有主流浏览器的更优雅的解决方案？同样理想的是，只使用 Javascript，而不是 JQuery。

感谢您的帮助。

Answer 1

好吧，您并没有真正预加载图像，因为您只是在页面加载之后调用preloadImages 函数，即在实际的 IMG 标签之后已阅读 html，浏览器可能已开始下载它们。最后一部分可能取决于 visibility:hidden 样式，但我不确定 - 至少我不希望所有浏览器都同意在这种情况下该怎么做。

此外，您还拥有在 JavaScript 和 HTML 中定义的 URL。这既多余又以后更难更改。

我必须承认我不知道这是否适用于任何地方，但你可以试试

1. 只有 JavaScript 中的图像 URL - 然后您可以添加进入 HTML，当它们准备好时

2. 使用 onload 事件处理程序在 JS Image 对象上断言图像已加载。全部加载后，将它们添加到文档(即页面)。

现在，我不知道给定的浏览器何时在 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/

同样，我不知道这是否真的适用于所有浏览器。在 Safari、Chrome 和 Firefox(都在 Mac OS 上)中似乎没问题，但无法确定。我建议您多次复制一个 gif 文件，并为每个文件指定一个不同的名称，这样它就有一个唯一的 URL。这应该可以防止它缓存，并使其动画时钟保持独立。然后尝试加载所有这些 GIF 而不是一堆不同的 GIF，看看它们是否保持同步。