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> | при первоначальной загрузке может слегка померцать, так как кадры могут грузиться с разной скоростью и там еще пара проблемок найдется, но после первого цикла все будет идти нормально. | Всего записей: 15117 | Зарегистр. 20-09-2014 | Отправлено: 04:24 28-03-2017 | Исправлено: Mavrikii, 06:09 28-03-2017 |
|