加载和使用Javascript

Question

我绝不是任何种类的编码器或程序员的我，但我一直在试图加载和显示一些GIF格式，使它们都从动画显示在同一时间（同步）多个GIF动画同时开始。换句话说，我需要它们同步。

我已经做了很多的谷歌搜索的，什么我已经出来，似乎在Chrome/Safari和Firefox的工作，但像往常一样，IE浏览器拒绝合作。

我当前的代码是这样的：

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结合。

您可以查看这里活生生的例子：从阅读这些链接的评论

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

但是：http://jsfiddle.net/AN9uB/

一些可能的方法或可能有帮助的帖子，我不完全相信他们是可能的。

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

在某些情况下，当使用Firefox 3.6.18查看页面时，第一个倒计时图像根本无法播放（停留在10），但其他情况下，所有gif都会同时加载并显示。

的主要问题是，我不能想办法让与Internet Explorer这项工作。我想也许预载图像，然后通过JavaScript刷新页面。这是一个丑陋的解决方案，但我认为它会起作用。

Flash是明显的工具可以做这种事情中，但我使这里成为谁的朋友只使用GIF格式。

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

感谢您的任何帮助。

Answer 1

好了，你没有真正预加载图像，因为你只调用preloadImages功能后已加载的页面，即在HTML中的实际IMG标签后已被读取，而且浏览器的启动可能下载它们。最后一部分可能取决于visibility:hidden风格，但我不确定 - 至少我不希望所有浏览器都能就此情况达成一致。

另外，您还有在JavaScript和HTML中定义的URL。这既是多余的，也很难在以后改变。

我必须承认，我不知道这是否会工作的权利无处不在，但你可以尝试

1. 只具有JavaScript中的图片网址 - 那么你可以添加然后 到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，并查看它们是否保持同步。