使用 Javascript 同时（同步）加载和显示多个动画 gif

Posted 2023-03-25

【中文标题】使用 Javascript 同时（同步）加载和显示多个动画 gif

【英文标题】：Load and display multiple animated gifs at the same time (synchronised) with Javascript

【发布时间】：2011-10-16 05:19:21

【问题描述】：

我绝不是任何类型的编码员或程序员，但我一直在尝试加载和显示一些 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.

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

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

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

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

Flash 是做这类事情的明显工具，但我为之制作这个的朋友只使用 gif。

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

感谢您的帮助。

【问题讨论】：

new Array 很丑，用[] 代替：p

就像我提到的，我在编码方面完全是新手，所以由于代码有效（在兼容的浏览器中），我只是保持原样。

你不需要解释自己 - 那只是一个挑剔。

【参考方案1】：

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

此外，您在 JavaScript 和 HTML 中都定义了 URL。这既是多余的，以后也更难改变。

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

仅在 JavaScript 中包含图像 URL - 然后您可以添加 准备好后放入 HTML 中

使用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，而不是一堆不同的，看看它们是否保持同步。

【讨论】：

感谢您的回复，但遗憾的是，从我的测试来看，它在 Internet Explorer 8 中不起作用。似乎 IE8 忽略了 javascript，或者如您所说，在放​​置 gif 之前启动动画时钟在文档中。

@crackerbear：嗯，太糟糕了，但值得一试