Существует альтернатива, которая не перезагружает GIF каждый раз и не использует трафик.
Он включает в себя сохранение GIF как Base64 в памяти (обход кеша браузера) и использует API FileReader (который, похоже, поддерживается во всех современных браузерах ). Обратите внимание, что загрузка изображений таким способом регулируется политикой перекрестного происхождения (в отличие от решений по перезагрузке изображений).
Обновление: Кэширование в браузере становится более интеллектуальным в отношении кэширования URI данных фонового изображения, в результате чего анимация не запускается заново. Я обнаружил, что теперь мне нужно добавить случайную строку для очистки кэша к URL-адресу данных (который в соответствии со схемой DataURI должен рассматриваться как необязательный атрибут. Протестировано в Chrome & IE Edge.)
См. Это в действии: http://jsfiddle.net/jcward/nknLrtzL/10/
Вот как это работает. Эта функция загружает изображение в виде строки в кодировке Base64.
function toDataUrl(url, callback) {
var xhr = new XMLHttpRequest();
xhr.onload = function() {
var reader = new FileReader();
reader.onloadend = function() {
callback(reader.result);
}
reader.readAsDataURL(xhr.response);
};
xhr.open('GET', url);
xhr.responseType = 'blob'; // IE11, set responseType must come after .open()
xhr.send();
}
Затем, в любое время, когда вы захотите перезапустить анимацию GIF, измените свойство background-image на none, затем строку base64 (в некоторых браузерах вам нужно повторно добавить дочерний элемент, чтобы запустить обновление без setTimeout ):
$div.css({backgroundImage: "none"});
$div.parent().add($div); // Some browsers need this to restart the anim
// Slip in a cache busting random number to the data URI attributes
$div.css({backgroundImage: "url("+img_base64.replace("image/gif","image/gif;rnd="+Math.random())+")"});
Благодаря этому ответу за функцию toDataURL (с исправлением для IE11.)