使用Javascript加载和显示多个动画GIF（同步） [英] Load and display multiple animated gifs at the same time (synchronised) with Javascript
问题描述
我绝不是任何类型的编码器或程序员，但我一直在试图加载和显示一些gif，使他们都从一开始就同时制作动画。换句话说，我需要他们进行同步。
我做了很多Google搜索，我发现了似乎使用Chrome / Safari和Firefox，但是像往常一样，Internet Explorer拒绝合作。
我当前的代码是这样：
var images = [thephoto1，thephoto2，thephoto3，thephoto4，thephoto5];
function initImages（）{
for（var i = 0; 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;
}
a href =http://jsfiddle.net/AN9uB/ =nofollow> http://jsfiddle.net/AN9uB/
一些可能的方法或可能有帮助的帖子：
但是从阅读这些链接的评论，我不能完全确定他们是可能的。
测试GIF我使用的只是随机图像我发现和一个小的预警，一些图像是相当大，因为我需要测试一个大小和持续时间的各种GIF。
在某些情况下，第一个倒计时图片根本不播放（它停留在10）当使用Firefox 3.6.18查看页面时，除此之外其余的gifs都同时加载和显示。
主要的问题是，我不能想到一种方法使这项工作与Internet Explorer。我想也许预加载的图像，然后通过javascript刷新页面。这是一个丑陋的解决方案，但我认为它会工作。
Flash是做这种事情的明显工具，但我的朋友只有使用gifs。
有一个更优雅的解决方案，适用于所有主要的浏览器？
非常感谢您的帮助。 / div>
好吧，你不是真的预加载图片，因为你只调用 preloadImages 函数之后加载，即在HTML中的实际IMG标签已被读取之后，浏览器可能开始下载它们。最后一部分可能取决于 visibility：hidden 样式，但我不确定 - 至少我不希望所有浏览器都同意在这种情况下做什么。
此外，您还在JavaScript和HTML中定义了这些网址。
我必须承认我不知道这是否会在任何地方都能正常工作，但你可以尝试
-
只有JavaScript中的图片网址，然后您可以将
li>
添加到HTML中（如果已准备好）
-
使用
onload事件处理程序
对JS映像对象来断言图像已加载。
一旦所有加载完成，就将它们添加到文档（即页面）。
，我不知道给定的浏览器何时在gif上启动动画时钟。如果它开始的时候gif已经加载，你没有太多可以做，因为gif将不会同时加载。然而，如果他们首次开始动画，当他们被放置在文档（这似乎很可能，但从不信任浏览器），那么有机会。
//这个函数将添加一个图像数组到div＃images
function showImages（images）{
var container = document.getElementById（images）; // get the #images div
for（var i = 0，l = images.length; i
img.src = images [i] .src; //设置src - 当发生这种情况时应该预加载图片
container.appendChild（img）; //将IMG标签添加到#images div
}
}
//这将从一个URL数组创建JS Image对象
function loadImages urls）{
var remaining = urls.length; //仍然等待获取的映像
var images = []; //空数组来保存创建的Image对象
//这个函数将被调用的Image对象加载
var onloadHandler = function（）{
remaining-- //减少剩余图像的数量
if（remaining <1）{
showImages（images）; //如果所有图片都已加载，请将它们添加到页面
}
};
//为每个URL创建一个Image对象
for（var i = 0，l = urls.length; i
img.onload = onloadHandler; //在设置src之前设置onload-handler
img.src = urls [i];
images.push（img）; //将Image对象添加到images数组
}
}
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，看看他们是否保持同步。
I'm by no means any kind of coder or programmer, but I've been trying to load and display some gifs so that they all animate from the beginning at the same time. In other words, I need them to be synchronised.
I've done a lot of Googling and what I've come up with seems to work with Chrome/Safari and Firefox, but as usual, Internet Explorer refuses to cooperate.
My current code is this:
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();
}
With some added CSS:
.preload
{
visibility: hidden;
}
It's basically this and this script combined.
You can view a live example here: http://jsfiddle.net/AN9uB/
Some possible methods or potentially helpful posts:
- Restart an animated GIF from JavaScript without reloading the image.
- Javascript to only display animated gif when loaded.
However from reading the comments on those links, I'm not entirely sure they're possible.
The test gifs I'm using are just random images I found and a small forewarning, some of the images are fairly large since I needed to test a variety gifs ranging in size and duration. All of the gifs loop except for the first countdown image which only plays once.
On some occasions the first countdown image doesn't play at all (it's stuck on 10) when viewing the page with Firefox 3.6.18, but otherwise the rest of the gifs all load and display at the same time.
The main problem is that I cannot think of a way to make this work with Internet Explorer. I thought perhaps to preload the images and then refresh the page via javascript. It's an ugly solution, but I think it would work.
Flash is the obvious tool to be doing this kind of thing in, but the friend who I'm making this for only uses gifs.
Is there a more elegant solution that works across all major browsers? Also ideally, to only use Javascript, not JQuery.
Thanks for any help.
Well, you're not really preloading the images, because you're only calling the preloadImages function after the pages has loaded, i.e. after the actual IMG tags in the html have been read, and the browser's probably started downloading them. The last part may depend on the visibility:hidden style, but I'm not sure - at least I don't expect all browsers to agree on what to do in that case.
Also, you have the URLs defined both in the JavaScript, and in the HTML. That's both redundant and also harder to change later.
I must admit I have no idea if this will work right everywhere, but you might try
only having the image URLs in JavaScript - you can then add then into the HTML, when they're ready
using the
onloadevent handler on the JSImageobjects to assert that an image has been loaded. Once they've all loaded, add them to the document (i.e. the page).
Now, I don't know when a given browser starts the animation-clock on a gif. If it starts the moment the gif has been loaded, there's not much you can do, since the gif's won't load at the same time. If, however, they first start animating when they're placed in the document (which seems probable, but never trust a browser), then there's a chance.
// 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);
};
Here's a jsfiddle of it all: http://jsfiddle.net/Frqys/2/
Again, I have no idea if this'll actually work in every browser. It seems ok in Safari, Chrome and Firefox (all on Mac OS), but it's impossible to be sure. I'd advise you to copy a gif file a number of times, and give each file a different name, so it'll have a unique URL. That should prevent it from caching, and keep its animation clock separate. Then try loading all those GIFs instead of a bunch of different ones, and see if they stay in sync.
这篇关于使用Javascript加载和显示多个动画GIF（同步）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
