Что с точки зрения производительности, каков наилучший способ загрузки изображений в галерею JS?

Question

Я строю галерею с нуля, которая полностью отрисовывается с помощью Javascript / JQuery.

Галерея состоит из ~ 70 фотографий.Пользовательский интерфейс галереи будет состоять только из кнопок «предыдущая» и «следующая» (без миниатюр).

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

ЗдесьВот различные методы, которые я рассматриваю:

1. При загрузке страницы просто загрузите первое изображение и предварительно загрузите остальные.

2. Когдапользователь нажимает кнопку «Далее», чтобы запросить изображение, используйте JS для создания и добавления тега изображения.

Answer 1

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

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

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

Answer 2

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

Answer 3

Думаю, я бы, вероятно, загрузил текущее изображение и 1 или 2 предыдущих / следующих изображения. Затем каждый раз, когда нажимаются следующие / предыдущие кнопки, загружается другое изображение на пару впереди.

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

Answer 4

Вы могли бы рассмотреть возможность загрузки просматриваемого изображения, а затем также предварительно загрузить соседнее (ые) изображение (я), что дает вам лучший сценарий обоих миров.Однако некоторые люди могут утверждать, что это «чрезмерная инженерия».Другие люди также, вероятно, будут утверждать, что вы должны начать с некоторой предварительно написанной библиотеки.Если вы еще не изучили это, это, безусловно, может сэкономить вам время.Я прошу прощения, если это очевидно для вас.

Причина, по которой я говорю это, заключается в том, что, безусловно, быстрее, если информация уже есть, вместо того, чтобы использовать ajax для ее запроса.Однако предварительная загрузка 70 фотографий может вызвать проблемы с производительностью другими способами, в зависимости от используемого браузера и производительности клиентской системы.Иногда процесс, который интенсивно использует ресурсы, может вызвать отставание браузеров такими способами, которые кажутся несвязанными, например зависание кнопки прокрутки.Это особенно верно, если это чей-то нетбук за 200 долларов с 1 Гб оперативной памяти и загруженный вредоносными программами.

Я предполагаю, что вы хотите предварительно загружать изображения асинхронно.

Edit :::

Исходя из вашего комментария выше, похоже, что вы просто хотите, чтобы начальная загрузка страницы была быстрее.В этом случае, вероятно, лучше всего загружать как можно меньше при загрузке страницы.А затем используйте jQuery для добавления изображений по запросу пользователей.В целом, этот подход, вероятно, будет работать достаточно хорошо.