Как показать экран загрузки при загрузке действительно большого изображения?

Question

У меня есть изображение 5 МБ, которое занимает около 2-3 минут для загрузки. Пока он загружается, я хочу иметь экран загрузки. После загрузки изображений экран загрузки исчезнет. (Изображение - это спрайт-образ, я использую CSS для его разбиения).

Если это возможно, то как я могу это сделать? Если это невозможно, то какие другие способы я могу использовать, чтобы скрыть загрузку изображения (или уменьшить размер изображения)?

Answer 1

Это изображение спрайт-изображения.

Я использую css, чтобы разделить их.

Если есть дополнительная информация, которая не была указана, в 5MB вы победили любые преимущества CSS-спрайта. Разделите его на отдельные файлы и ленивую нагрузку по требованию.

Если вы используете/можете использовать jQuery this plugin, то приятная работа ленивая загрузка.

Также убедитесь, что вы используете лучший вариант compression. Даже если вы должны использовать сжатие без потерь, все же есть некоторые преимущества, которые можно сделать, удалив метаданные из файлов изображений.

«Сохранить для Интернета» в Photoshop отлично подходит для балансировки сжатия с потерями (качество и размер), а также дает возможность не встраивать метаданные в файлы изображений. Вы можете использовать такой инструмент, как Yahoo SmushIt, если у вас нет доступа к Photoshop.

Answer 2

Просто скрыть страницу/элемент за какой-погрузочной слой и удалить этот слой после загрузки изображения:

<!-- within you site header --> 
<script type="text/javascript"> 
/* display loader only if JavaScript is enabled, no JS-lib loaded at this point */ 
document.write('<div id="loader" style="display:table; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; background: #fff;">' 
    + '<div style="display:table-cell; vertical-align:middle; text-align: center;">' 
    + 'loading…<br /><img src="icon.load.gif" />' 
    + '</div></div>'); 
</script> 


<!-- at the bottom of you HTML (right before closing BODY-tag) --> 
<script src="jquery.min.js"></script> 
<script type="text/javascript"> 
/* hide the loading-message */ 
$(window).load(function(){ 
    $('#loader').fadeOut(500); 
}); 
</script> 

Хитрость заключается в том, чтобы использовать $(window).load() в качестве обработчика событий, который не получает обожженного, пока все содержимое страницы полностью загружены.