GIF, Javascript и несколько экземпляров

Question

Может быть, глупый вопрос, но здесь все равно идет.

Пример. Допустим, у меня есть один анимированный GIF без циклов, и у меня есть два элемента img.

<img src="" id="slot1" />
<img src="" id="slot2" />

Поэтому я использую небольшой javascript, чтобы изменить источник слота 1.

function changE(x)
{var image=document.getElementById (x);
 image.src="animated.gif";
}

someButtonGotClicked=changE('slot1'); 

это прекрасно работает. Gif воспроизводится от начала до конца, но если я затем изменю src для slot2 на тот же gif:

changE('slot2');  

slot1 сбрасывает свой gif обратно в начало, чтобы синхронизировать с slot2, начиная его gif.

Теперь я знаю, что могу скопировать gif и иметь 2 отдельных файла для использования, и я знаю о спрайт-листах, но мне интересно, могу ли я использовать одну копию gif и использовать ее несколько раз на странице все случаи, когда gif перезапускается каждый раз, когда другой элемент img получает тот же файл, что и src?

Надеюсь, это не смущало. Благодаря.

Answer 1

Как только изображение загружено в память, все другие объекты, которые запрашивают это изображение, используя тот же URL, получают ссылку на изображение из кэша браузера.Это позволяет избежать загрузки одного и того же изображения несколько раз.В случае gif одной из метаданных, которые нужно отслеживать, является текущий кадр, который хранится не в элементе <img> dom, а скорее на уровне браузера в структуре, которую он использует для хранения этого gif.

При загрузке этот индекс кадра сбрасывается.Таким образом, пока браузер обрабатывает цикл gif, загрузка второго изображения устанавливает индекс текущего кадра в начало, следовательно, оба изображения синхронизируются.

Это реализация браузера, и, похоже, большинство браузеров следуют этой реализации.Одним из преимуществ этого является то, что если у вас есть тысячи маленьких картинок (с одного и того же URL) на одной странице, браузер будет выполнять намного меньше вычислений для их визуализации, поскольку он будет изменять только один индекс кадра, а не тысячи.

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

function changE(x)
{var image=document.getElementById (x);
 image.src="animated.gif?" + Math.random();
}

Так что браузер думает, что это другое изображение (т.е. другой URL).

Answer 2

Попробуйте использовать решение, подобное следующему:

<img src="" id="slot1" class="animate" />
<img src="" id="slot2" class="animate" />


(function(doc, w) {
    var changE, getElementsByClassName;

    changE = function(img) {
        img.src = "animated.gif";
    };
    getElementsByClassName = function(node, classname) {
        if (node.getElementsByClassName) { // use native implementation if available
            return node.getElementsByClassName(classname);
        } else {
            return (function getElementsByClass(searchClass, node) {
                if (node == null)
                    node = doc;
                var classElements = [],
                    els = node.getElementsByTagName("*"),
                    elsLen = els.length,
                    pattern = new RegExp("(^|\\s)" + searchClass + "(\\s|$)"), i, j;

                for (i = 0, j = 0; i < elsLen; i++) {
                    if (pattern.test(els[i].className)) {
                        classElements[j] = els[i];
                        j++;
                    }
                }
                return classElements;
            })(classname, node);
        }
    };
    w.onload = function() {
        var imgs, i = 0, l;
        imgs = getElementsByClassName(doc, 'animate');
        l = imgs.length;
        for (i; i < l; i++) {
            imgs[i].onclick = function(e) { changE(this); };
        }
    };
})(document, window);

Это установит событие щелчка для каждого изображения с именем Calss animate, и событие щелчка повлияет только на конкретное изображение, на которое нажали.