複数のアニメーションGIFを同時に読み込み、Javascriptと同時に（同期して）表示します

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は1回だけ再生する最初のカウントダウン画像を除いてループします。

Firefox 3.6.18でページを表示しているときに、最初のカウントダウン画像がまったく再生されません（10に固まってしまいます）が、それ以外の場合は残りのgifがすべて同時に読み込まれて表示されることがあります。

主な問題は、Internet Explorerでこの作業を行う方法を考えることができないことです。私はおそらく画像をプリロードしてから、JavaScriptを使ってページをリフレッシュすると考えました。それは醜い解決策ですが、私はそれがうまくいくと思います。

Flashは、このようなことをするための明白なツールですが、私がこれを作っている友達はgifだけを使用しています。

すべての主要なブラウザで機能するより洗練されたソリューションがありますか？また理想的には、Javascriptを使用するだけで、JQueryは使用できません。

ありがとうございました。

Answer 1

さて、あなたはHTMLのみで、実際のIMGタグの後にIEが読み込まれている、ロードされたページ後preloadImages機能を呼び出しているので、あなたは本当に、画像をプリロードしていない、とブラウザは、おそらく始めていますそれらをダウンロードする。最後の部分はvisibility:hiddenスタイルに依存するかもしれませんが、私はよくわかりません - 少なくとも、私はすべてのブラウザがその場合何をするかについて同意するとは思っていません。

また、JavaScriptとHTMLの両方にURLが定義されています。それは後で変更するのは冗長であり、また困難です。

私は、これは正しいどこでも動作する場合、私は見当がつかない認めなければならない、しかし、あなただけのJavaScriptで画像のURLを持つ

1. を試みるかもしれない - 彼らは「とき、あなたはその後、HTMLに続い を追加することができます画像がロードされていることを主張するJS Imageオブジェクトにonloadイベントハンドラ を使用して

2. 準備ができて再。 すべて読み込まれたら、文書（ページ）に追加します。

ここで、特定のブラウザがいつ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をすべて読み込み、それらが同期しているかどうかを確認してください。