Определенное содержимое не должно загружаться при загрузке страницы

Я создал wp тема. вот одна из его страниц http://www.durgeshsound.com/gallery/

Когда вы нажимаете на любой альбом просмотра, он открывает соответствующие фотографии этого альбома. Каждый альбом состоит из 10-12 фотографий и, следовательно, на целой странице около 80-90 изображений.

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

вот мои коды

Javascript: http://pastie.org/9658839Page template code in wp: http://pastie.org/9658843CSS: http://pastie.org/9658847

пожалуйста, помогите. спасибо заранее

Источник

3 ответа

Решение

Есть несколько шагов для оптимизации производительности вашего сайта, когда вы используете изображения на своей странице.

  1. Используйте Ленивая Загрузка
  2. Используйте изображение спрайта, чтобы избежать многократного http-запроса для маленьких изображений.
  3. Используйте кэширование для статических изображений. это поможет избежать ненужных http-запросов.

Пример спрайта: Вы можете видеть, что SO также использует изображение спрайта на этом сайте.

Источник

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

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

Источник

Могли бы попробовать плагин Lazy Load js, например: http://www.appelsiini.net/projects/lazyload

Источник
Другие вопросы по тегам