Анимированный gif только петли один раз в Chrome и Firefox

У меня есть анимированный gif, который я хочу отображать в любое время, когда загружается страница. Когда я просматриваю изображение за пределами браузера, изображение циклически бесконечно и работает отлично, но всякий раз, когда я показываю изображение в браузере, анимация только петли один раз. Есть ли у кого-нибудь предложения по созданию цикла изображения бесконечно?

В настоящее время я просто делаю это, чтобы изображение выглядело так, как будто оно появляется, но только один раз:

document.getElementById('ajaxloader').innerHTML = 
    '<img src="images/ajax-loader.gif" title="Loading, please wait..">';

Ответ 1

У меня была та же проблема с моим классом кодировщика/декодера GIF, который я написал некоторое время назад (и время от времени улучшался). Я нашел решение для этого только вчера. GIF полностью прекрасен, проблема в современной стороне интернет-браузера. Зараженные браузеры - это Opera, IE, Chrome (не тестировали других).

После некоторого исследования по этому вопросу (путем сравнения циклов и несинхронизации изображений) я обнаружил, что эти браузеры GIF декодеры игнорируют параметры цикла в файле GIF. Вместо этого они зависят от недокументированного расширения приложения в первом кадре файла GIF.

Таким образом, решение состоит в том, чтобы добавить эту команду расширения непосредственно перед данными первого кадра. Добавьте этот кусок:

0x21,0xFF,0x0B,"NETSCAPE","2.0",0x03,0x01,0x00,0x00,0x00

Это заставит браузеры бесконечно зацикливаться.

Здесь пример:

Вид шестнадцатеричного просмотра, чтобы вы могли увидеть, как он добавлен:

GIF не чувствителен при вставке/переупорядочивании фрагментов без изображения, поэтому вы можете вставить это перед первым изображением в любом месте между любым другим расширением. Я положил его непосредственно после заголовка + палитры. Это можно сделать с помощью С++ или любого другого языка. (повторное кодирование не требуется). Для получения дополнительной информации см.:

[Редактировать Ридом Данкелем]

Вы также можете сделать это вручную с помощью Hex Editor. Я использовал "Hex Fiend" на macOS Sierra.

Найдите 21 F9 в начале фрагмента hex (это заголовок). На фото выше 21 F9 04 04 00 00 00 00. Возможно, вы немного отличались, но обратите внимание, что он предшествует 2C, который отмечает начало блока изображения.

Перед 21 F9... частью вставьте следующий шестнадцатеричный символ, помеченный как "расширение приложения" на фотографии выше:

21 FF 0B 4E 45 54 53 43 41 50 45 32 2E 30 03 01 00 00 00

Сохраните и протестируйте его.

Addon by Spektre: Beware 21 F9 отмечает расширение gfx, которое необязательно, поэтому оно может не присутствовать для всех или любых фреймов (но в наши дни это очень редко)

Ответ 2

Вы можете использовать инструмент командной строки gifsicle для обработки анимированного gif и добавить правильный цикл, совместимый со всеми браузерами:

Animation options: -l, --loopcount[=N] Set loop extension to N (default forever).

поэтому в терминале я:

$ gifsicle --loopcount problem.gif > fixed.gif

Создает новый Анимированный GIF, который работает в Chrome и Firefox, а также Safari.

Ответ 3

Вы можете указать конечное число циклов, или вы можете сделать цикл фильма навсегда. INFINITE (или -1) циклически перемещает фильм снова, пока страница находится на экране. Например, этот код создает фильм, который непрерывно циклически:

<img 
  src="../graphics/moonflag.mpg" 
  dynsrc="../graphics/moonflag.mpg"
  loop=infinite
  alt="Astronauts on the moon">

Источник

Ответ 4

Написал PHP gif fixer на основе ответа Spektre:

/**
 * gif image loop fixer, prints image full url
 * 
 * as this is written as a part of framework, there are some config options
 */

// put your images absolute path here eg '/var/www/html/www.example.com/images/'
// or use autodetection below
$GLOBALS['config']['upload_path'] = str_replace("\\", "/", trim(getcwd(), " /\\")).'/images/';

// put your images relative/absolute url here, eg 'http://www.example.com/images/';
$GLOBALS['config']['upload_url'] = '/images/';

function _ig($image){

    $image_a = pathinfo($image);

    $new_filename = $GLOBALS['config']['upload_path'].$image_a['dirname'].'/_'.$image_a['filename'].'.'.$image_a['extension'];
    $new_url = $GLOBALS['config']['upload_url'].$image_a['dirname'].'/_'.$image_a['filename'].'.'.$image_a['extension'];

    if ($image_a['extension'] == 'gif'){

        if (!file_exists($new_filename)){

            // load file contents
            $data = file_get_contents($GLOBALS['config']['upload_path'].$image);

            if (!strstr($data, 'NETSCAPE2.0')){

                // gif colours byte
                $colours_byte = $data[10];

                // extract binary string
                $bin = decbin(ord($colours_byte));
                $bin = str_pad($bin, 8, 0, STR_PAD_LEFT);

                // calculate colour table length
                if ($bin[0] == 0){
                    $colours_length = 0;
                } else {
                    $colours_length = 3 * pow(2, (bindec(substr($bin, 1, 3)) + 1)); 
                }

                // put netscape string after 13 + colours table length
                $start = substr($data, 0, 13 + $colours_length);
                $end = substr($data, 13 + $colours_length);

                file_put_contents($new_filename, $start . chr(0x21) . chr(0xFF) . chr(0x0B) . 'NETSCAPE2.0' . chr(0x03) . chr(0x01) . chr(0x00) . chr(0x00) . chr(0x00) . $end);

            } else {

                file_put_contents($new_filename, $data);

            }

        }

        print($new_url);

    } else {

        print($GLOBALS['config']['upload_url'].$image);

    }

}

Это делает копию образа .gif как _image.gif с нужной строкой, вставленной после таблицы цветов, и выводит новый url-адрес src. (Проверяет, что изображение уже исправлено.)

Использование:

<img src="<?php _ig($image); ?>">

или

<img src="<?php _ig('image.gif'); ?>">

Отказ от ответственности: никаких обязанностей не принято, и я знаю, что это можно оптимизировать:)