Использование спрайт-листов в веб-приложении (.NET MVC)

Question

Я только что развернул веб-приложение (.NET MVC), которое содержит довольно много изображений / значков ( В настоящее время существует около 50 отдельных файлов .png, занимающих около 40 КБ. ), и яБыло любопытно узнать, как создать спрайт-лист с одним изображением, который может содержать все изображения, а не иметь несколько изображений.

Стоит ли усилий для создания спрайт-листа, которыйсодержит все изображения в одном изображении и ссылается на них по позиции?

Поможет ли это при таких проблемах, как «мерцание» при загрузке?(изображения могут иногда загружаться после остальной части страницы)

Любые предложения будут с благодарностью!

Answer 1

Создание одного спрайта изображения из нескольких изображений может определенно ускорить время загрузки страницы и избежать мерцания. Я использовал Image Optimization Framework в некоторых своих проектах с очень хорошими результатами. Тем не менее, важно правильно выбирать изображения, которые будут помещены в спрайт, и способ их группировки. Значки кнопок являются отличными кандидатами на эту работу. Большие изображения, которые появляются только на некоторых страницах, не должны быть включены в спрайт.

Answer 2

Я думаю, что вы хотели бы "предварительно загрузить" ваши изображения, используя некоторые сценарии в верхней части документа. Здесь хорошая дискуссия:

Как работает предварительная загрузка javascript?

Кроме того, вы можете ссылаться на свои значки в таблице стилей для страницы. В любом случае значки должны быть доступны без мерцания.