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

Question

У меня есть обратный вызов от вызова ajax, который возвращает кучу ссылок на изображения. Я сохраняю этот массив в переменной (называемой fullPeopleList), а затем по щелчку ссылки показываю все изображения в DOM. как то так:

function ShowAllPeople() {
var html = [];
$.each(fullPeopleList, function (i, person) {
    html.push("<img title='" + person.Name + "' height='45' width='45' src='" + person.SafePicLink + "' /> ");
});
html.push("&nbsp; <a id='showTop' href=''>Show Less ...");

$("#people").html(html.join(""));

}

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

Можно ли в любом случае загрузить эти изображения в фоновом режиме, когда я получу первоначальный список, поэтому, когда я нажимаю ссылку "Показать", они отображаются быстро?

Answer 1

Как насчет обертывания области, в которой они показаны, в div, а затем visibility: hidden, а затем использовать ссылку, чтобы изменить ее на visibilty: visible it? (желательно через добавление / удаление класса). Использование hidden означает, что пространство все еще используется, в отличие от none, который бы этого не делал. Тем не менее, вам все равно придется создавать области правильного размера, поскольку вы не можете зарезервировать пространство, если не знаете размера изображения (пока).

Answer 2

Я полагаю, что «классический» метод - это наше позиционирование «abs» для «отображения» изображения вне области просмотра.Например, при -10000 0 location.

Вы также можете использовать событие «onload» элемента img.См. SO Q

. Вы также должны проверить, нет ли замедления на вашем сервере изображений.Я рекомендую вам хранить изображения на Amazon S3.Я делаю, и они оба очень быстрые и очень дешевые.

Наконец, вы должны пересмотреть свой пользовательский опыт.Например, покажите анимацию во время загрузки изображений.Или отобразите изображения, используя галерею или карусель .Преимущество состоит в том, что если пользователь будет видеть только одно или два изображения за раз, он будет казаться быстрее .- Поскольку вы можете предварительно загружать дополнительные изображения в фоновом режиме, пока пользователь (позже) не нажмет кнопку «Далее».

Answer 3

Почему бы просто не сделать манипуляцию DOM, которую вы делаете сейчас, когда ссылки на изображения изначально получены?Просто вставьте их в скрытый элемент, пока пользователь не решит просмотреть их все, после чего ShowAllPeople() просто сделает элемент видимым.