加載和使用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，並查看它們是否保持同步。