Вопрос по javascript, html – Анимированные GIF только один раз зацикливается в Chrome и Firefox

22

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

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

document.getElementById('ajaxloader').innerHTML = 
    '<img src="images/ajax-loader.gif" title="Loading, please wait..">';
@ZoltanToth Спасибо за ваше время. В итоге я получил другое загрузочное изображение с другого сайта, который их генерирует. Не уверен, что не так с тем, что у меня было изначально, но новый работает. Ryan
покажи нам свое изображение - загрузи его куда-нибудь Zoltan Toth
@ZoltanToth Где бы вы хотели, чтобы я загрузил его? Это .GIF, который я сгенерировал изajaxload.info. Ryan
Похоже на работу -jsfiddle.net/3ZWpD/1 (Я использовал один и тот же генератор для GIF) Zoltan Toth
Есть варианты задержки между кадрами и количество циклов. Я полагаю, это зависит от того, насколько детально ваше программное обеспечение для создания .gif. УвидетьOptimizing animated GIFs dadinck

Ваш Ответ

6   ответов
19

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

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

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

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

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

Вот пример:

looping

Шестнадцатеричный вид, чтобы вы увидели, как он добавлен:

hex

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

How to find where does Image Block start in GIF images? Decode data bytes of GIF87a raster data stream

[Edit by Reed Dunkle]

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

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

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

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

Сохраните и проверьте это.

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

Это определенно работает и должно быть принято как лучший ответ.
Есть намного более легкие ответы, которые избегают возможной человеческой ошибки. Шестнадцатеричное редактирование файла сложно! @grimlek
& quot; Зараженные браузеры & quot; XD
@ MattSephton, кто будет делать это вручную? Простой скрипт может сделать это легко (как это сделал Раули Раджанде) ... вся информация для этого есть в ответе и 2 ссылки внизу, также это единственный способ сделать это, если у кого нет доступа к сам код страницы, как здесь, на SO / SE ... обычные обходные пути не применимы в таком случае
@Spektre спасибо за указание на сценарий Раули, я пропустил, что он был связан. Я не согласен с тем, что это единственный способ сделать это (см. Мой ответ для более элегантного решения), а также невозможно управлять циклической разметкой.
0

канитель позволит вам экспортировать GIF, который будет правильно зацикливаться. Просто откройте GIF, а затем «Файл» & GT; «Экспортировать как» и установите флажок «Как анимация». и "Loop Forever" флажки. Я не знаю, обновляет ли это файл, как вОтвет Спектре, но мое тестовое изображение правильно зациклено в FireFox 60.0b8 (64-разрядная версия), Chrome версии 65.0.3325.181 (официальная сборка) (64-разрядная версия) и Safari версии 9.1.1 (11601.6.17).gimp loop forever

1

convert -loop 0 bad.gif good.gif
Ты мой герой
2

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

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

Источник

stackoverflow.com/a/19808575/1256925 - обычно строчные буквы легче набирать и читать.
Это неправильный ответ, устаревший атрибут loop работал только с фильмами, но не с GIF-файлами. Цикл закодирован в GIF, а не в теге изображения.
1

/**
 * 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);

    }

}

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

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

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

или же

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

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

16

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

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

так в Терминале я делаю:

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

Который производит новый анимированный GIF, который работает в Chrome & amp; Firefox, а также Safari.

Именно то, что я искал :)

Похожие вопросы