Как загрузить большой анимированный gif для пользователя

-2

Мой сайт будет иметь большой анимированный gif (шириной 1900 пикселей). Как и следовало ожидать, начальная нагрузка очень длинная, а анимация очень прерывистая. Есть ли лучший способ загрузить gif, чтобы он не перетащил сайт вниз (и сделать прокрутку изменчивым)?Как загрузить большой анимированный gif для пользователя

источник

2014-12-04 dcp3450

Если вы загружаете изображение по адресу 1px wide и 1px tall, это не повлияет на вашу прокрутку. Вот хороший маленький CSS/HTML загрузки больших изображений хак:

<img src="http://placekitten.com/1000/1000" width="1" height="1" onload="this.style.height = 'auto'; this.style.width = 'auto';">

Загрузите изображение в 1px размера, а затем, когда он загружен, отобразить его в обычном режиме.

Если вы хотите загрузить изображение после загрузки тела, попробуйте следующее:

function initBanner(){ 
 
    
 
    var bannerSrc = "http://placekitten.com/1000/1000"; 
 
    // contains the src of the image 
 
    
 
    var banner = document.getElementById('banner1'); 
 
    // this is the emage object 
 
    
 
    banner.src = bannerSrc; 
 
    // add the src to the image 
 
    
 
    }

<body onload="initBanner()"> 
 
    <!-- when the body has finished loading, call function initBanner() --> 
 

 
    <img id="banner1" src="" /> 
 

 
</body>

источник

2014-12-04 17:15:48

Это анимированный gif, поэтому мне нужно загрузить полное изображение. Интересно, могу ли я лениться. В основном загрузите страницу, затем загрузите gif без ущерба для самой страницы. Имеют смысл? – dcp3450

@ dcp3450, проверьте мои изменения. Это то, что вы хотите? –

Я бы не подумал об этом! Ницца! – www139

Вы можете предварительно загрузить изображение, а затем, как только он будет загружен вставить его где-нибудь на вашей странице :

var image = new Image(); 
image.onload = function() { 
    document.body.appendChild(image); 
}; 
image.src = 'image.gif';

JSFiddle

источник

2014-12-04 19:51:43

Как загрузить большой анимированный gif для пользователя

ответ

Смежные вопросы