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

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

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


jquery ajax hidden jsonp
person stephjang    schedule 02.12.2011    source источник

Ответы (3)


arrow_upward
3
arrow_downward

Это полностью зависит от того, что вы пытаетесь сделать. Если вы создаете элементы 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.

person T.J. Crowder    schedule 02.12.2011

arrow_upward
1
arrow_downward

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

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

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

person Andrew Jackman    schedule 02.12.2011
comment
Спасибо! Я не думал о каскадных нагрузках. Имеет смысл. Кстати, то, что вы описываете, немного отличается от первоначального решения, которое я предложил, в котором говорится, что нужно предварительно загрузить все сразу (что приведет к длительному начальному времени ожидания). - person stephjang; 02.12.2011

arrow_upward
0
arrow_downward

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

person chandoo    schedule 02.12.2011