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

Question

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

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

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

Answer 1

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

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

Source

Answer 2

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

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

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

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

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

Вот пример:

Hex зрения, так что вы видите, как он добавил:

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

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

---

[Редактировать Рид Dunkle]

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

Искать 21 F9 в начале фрагмента шестнадцатеричного (это заголовок). На фотографии выше, это 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 

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

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

Answer 3

Написал PHP GIF закрепитель на основе ответа по 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); 

    } 

} 

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

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

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

или

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

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

Answer 4

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

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

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

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

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