Лучше использовать «скрытый» атрибут CSS или получить каждый набор новых изображений?

Question

Я пытаюсь получить кучу фотографий с Flickr с помощью вызова jQuery AJAX с использованием JSONP.Я хотел бы отображать n изображений одновременно, а затем показывать следующие n изображений каждый раз, когда пользователь нажимает кнопку.

Я прочитал этоОдним из способов является добавление всех изображений в DOM в функции обратного вызова и использование «скрытого» атрибута CSS для скрытия и отображения следующих n изображений по мере нажатия пользователем.Это рекомендуемая практика?

Answer 1

Это полностью зависит от того, что вы пытаетесь сделать.Если вы создаете img элементы и устанавливаете их src, даже если они скрыты с помощью display: none (в этом отношении, даже если вы вообще не добавляете их в DOM), браузер все равно запросит изображениес сервера.Если ваша страница позволяет пользователю фильтровать изображения перед их просмотром или разрешает подкачку страниц, это может генерировать ненужный сетевой трафик.В идеале, предварительная загрузка изображений возможна только тогда, когда пользователь, скорее всего, их увидит, но достаточно рано, чтобы его не оставили в ожидании.

Обратите внимание, что вы опять не необходимо поместить элементы img в DOM, пока вы не будете готовы.Достаточно просто создать элемент img и установить его src ( попробуйте здесь , этот код никогда не добавляет img в DOM).Таким образом, вы можете сохранить карту элементов img, например:

var preloaded = {};
function preload(path) {
    var img;
    if (!preloaded[path]) {
        preloaded[path] = img = document.createElement('img');
        img.src = path;
    }
}

Затем они будут у вас, когда вы будете к ним готовы, но без необходимости убирать их где-нибудь в DOM.

Answer 2

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

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

При этом, если у вас есть 100 наборов размера n , вам следует ограничить количество предварительной загрузки, возможно, только предварительно загрузить следующие два или три набора (и каждый следующий щелчок должен загружать другой задавать). Идея состоит в том, чтобы всегда быть впереди пользователя, чтобы ему никогда не пришлось ждать просмотра следующего набора изображений.

Answer 3

лучше достигается каруселью. Был пример карусели flickr. Проверьте ссылку ниже, это может быть полезно для http://sorgalla.com/projects/jcarousel/examples/dynamic_flickr_feed.htmlou.