Загружать и отображать несколько анимированных GIF-файлов одновременно (синхронизировано) с Javascript - PullRequest
Новая
       19

Загружать и отображать несколько анимированных GIF-файлов одновременно (синхронизировано) с Javascript

2 голосов
/ 29 июля 2011

Я ни в коем случае не кодер и не программист, но я пытался загрузить и отобразить некоторые 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;
    }

Это в основном это и этот скрипт вместе взятые.

Вы можете посмотреть живой пример здесь: http://jsfiddle.net/AN9uB/

Некоторые возможные методы или потенциально полезные сообщения:

Однако, прочитав комментарии к этим ссылкам, я не совсем уверен, что они возможны.

Тестовые картинки, которые я использую, - это просто случайные изображения, которые я нашел, и небольшое предупреждение, некоторые изображения довольно большие, так как мне нужно было протестировать различные картинки в диапазоне размеров и продолжительности. Все циклы GIF, кроме первого изображения обратного отсчета, которое воспроизводится только один раз.

В некоторых случаях первое изображение обратного отсчета не воспроизводится вообще (оно застряло на 10) при просмотре страницы с Firefox 3.6.18, но в остальном все остальные картинки загружаются и отображаются одновременно.

Основная проблема в том, что я не могу придумать, как заставить это работать с Internet Explorer. Я подумал, возможно, для предварительной загрузки изображений, а затем обновить страницу с помощью JavaScript. Это уродливое решение, но я думаю, что оно сработает.

Flash - очевидный инструмент для подобных вещей, но мой друг, для которого я делаю это, использует только картинки.

Существует ли более элегантное решение, которое работает во всех основных браузерах? Также в идеале использовать только Javascript, а не JQuery.

Спасибо за любую помощь.

1 Ответ

1 голос
/ 30 июля 2011

Ну, вы на самом деле не загружаете изображения, потому что вы вызываете функцию preloadImages только после загрузки страниц , то есть после того, как фактические теги IMG в html были прочитаны,и браузер, вероятно, начал загружать их.Последняя часть может зависеть от стиля visibility:hidden, но я не уверен - по крайней мере, я не ожидаю, что все браузеры согласятся, что делать в этом случае.

Кроме того, у вас есть URL-адресаопределяется как в JavaScript, так и в HTML.Это и избыточно, и потом сложнее изменить.

Я должен признать, что понятия не имею, будет ли это работать везде, но вы можете попробовать

  1. только с изображениемURL в JavaScript - вы можете затем добавить их в HTML, когда они будут готовы

  2. , используя обработчик событий onload в объектах JS Image, чтобы утверждать, что изображение имеетбыл загружен.Как только они все загрузятся, добавьте их в документ (то есть на страницу).

Теперь я не знаю, когда данный браузер запускает часы анимации на 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-файлы вместо нескольких разных и посмотрите, синхронизируются ли они.

...