Каков наиболее эффективный способ хранения изображения? HTML/CSS/JS

Question

У меня будет много изображений и попытка найти наиболее эффективный способ хранения этих изображений, чтобы страница была быстрой.

До сих пор я думал только двумя способами: с нагрузкой Javascript например picture = new Image(); picture.src = "file.jpg"; и добавить/удалить на странице по мере необходимости, или загрузить в <img> и установить display:none.

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

Answer 1

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

1. небольшого размер с высокой степенью сжатия и, таким образом небольшая занимаемая площадь: это изображение, которое вы загружаете в сетки и отображаете на странице, где e multiple images
2. увеличенное изображение с более низким сжатием и более высоким качеством изображения - это тот, который вы показываете, когда люди хотят видеть детали.

Поскольку люди чаще всего приходят к подробному изображению со страницы, на которой была показана небольшая/быстрая загрузка, и, таким образом, она уже находится в кеше браузеров, вы делаете небольшой трюк и имеете мгновенные фотографии без предустановить что-нибудь.

Это выглядит следующим образом:

На странице сведений вы показываете высокую степень сжатия небольшого изображения в тег изображения, который имеет размерность большей подробной версии. Затем вы загружаете более крупную подробную версию в фоновом режиме, используя new Image() с присоединенным событием onload, которое изменяет источник тега изображения с небольшой сжатой версией на большую подробную версию.

Он отлично выглядит, работает быстро, и пользователи будут любить вас;)

PS: лучший способ для хранения изображений является кэш браузеров, не JS или DOM, так что если вы действительно хотите, чтобы поджать изображения, которые обычно бывает плохой практикой (иногда это может потребоваться), заставьте браузер забрать их для вас в фоновом режиме, включив файл css, который ссылается на них в стилях, которые не применяются к визуальным областям вашего сайта.

Answer 2

Лучше использовать javascript так, как он есть, а затем добавить его в DOM по мере необходимости, в отличие от первого добавления его в DOM, а затем скрыть его, поскольку DOM-манипуляция происходит намного медленнее, и вы можете не использовать некоторые изображения

Answer 3

Я не уверен в «эффективном», но наиболее логичным способом было бы не использовать JavaScript для загрузки изображения (бесполезно, если у вас отключен JavaScript) или для установки изображения как скрытого с помощью (аналогично, и браузер, вероятно, просто загрузит изображение в любом случае).

Таким образом, разумным предложением было бы использовать скучные старые пейджинг и отображать «n» изображения на страницу. Однако, чтобы обновить эту версию, вы можете использовать «ленивый» (a.k.a. «отложен») загрузку и загрузку дополнительного содержимого страницы через Ajax при прокрутке пользователя. Тем не менее, это ключ, это изящно деградирует в стандарт «страничный» поведение, если JavaScript отключено, и т.д.

Прекрасный пример этого в операции компании Google image search, и если вы search here on StackOverflow вы видите обсуждение возможных реализаций, и т.д. .