Mavrikii
Platinum Member | Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
И вот вам в виде анимации через png - это будет работать везде ) Плюс кадров меньше и они сжаты, полный размер 367 кб - http://rgho.st/8jtlWjv4n
надо лишь проверить, что после загрузки браузер не делает запросов к серверу ) в принципе не должен, иначе это будет DDoS.
как вариант можно просто наложить картинки стопкой и отображать только одну из них. то есть код будет такой
Код: <!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style>
body {background-color: red; }
#animate {
width: 440px;
height: 326px;
position: relative;
}
#animate img {
display: none;
position: absolute;
top: 0px;
left: 0px;
}
</style>
</head>
<body>
<div id='animate'></div>
<script>
// preload
var frames = 16, obj = document.getElementById('animate'), frame = 0;
for(var i = 0; i < frames; i++) {
var img = document.createElement('img');
img.src = 'compressed/' + ('0' + (i + 1)).slice(-2) + '.png';
if (i == frames - 1)
img.onload = animate;
obj.appendChild(img);
}
function animate() {
var children = obj.children;
children[frame++].style.display = 'none';
if (frame > frames - 1) frame = 0;
children[frame].style.display = 'block';
setTimeout(animate, 100);
}
</script>
</body>
</html> |
при первоначальной загрузке может слегка померцать, так как кадры могут грузиться с разной скоростью и там еще пара проблемок найдется, но после первого цикла все будет идти нормально. |
Всего записей: 15108 | Зарегистр. 20-09-2014 | Отправлено: 04:24 28-03-2017 | Исправлено: Mavrikii, 06:09 28-03-2017 |
|
