Как подгружать изображения по требованию (клику)?

Question

[Ринат Хайсман]

Добрый час.

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

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

Answer 1

[Владимир Проскурин]

Вы скорее всего делаете что-то не так. Вот так должна выглядеть превьюшка.

<a href="fullimage.jpg">
   <img src="thumbimage.jpg">
</a>

Таким образом, браузер не будет загружать изображение из a href, а только превьюшку thumbimage.jpg

Comments

[Ринат Хайсман]

У меня не совсем так. Модальное окно всплывает по клику на кнопку "посмотреть". В модальном окне краткое описание кейса, форма обратной связи и слева полотно полного лендинга.

[Владимир Проскурин]

Можете ссылку скинуть?

[Ринат Хайсман]

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

[Ринат Хайсман]

Владимир, https://landing-page.one/

[Владимир Проскурин]

Вы можете сделать так.
<img data-src="thumbimage.jpg" class="preview">
И потом, когда вызовете открытие модального окна, просто выполните

$('.active-modal .preview').each(function() {
    var $this = $(this);
    $this.attr('src', $this.data9'src');
});

т.е. храним путь до картинки не в атрибуте src, а в data-src, и потом при открытии окна берем из data-src путь до картинки и вставляем его в src, и тогда браузер начнет его грузить.

[Владимир Проскурин]

Чтобы содержимое не грузилось с сайтом, нужно кинуть его в отдельный html файл и грузить через ajax.

[Ринат Хайсман]

Владимир Проскурин, но у меня ведь много модальных окон, много разного содержимого. Разбить на x html'ок?

[Владимир Проскурин]

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

[Ринат Хайсман]

function getajax(){ $('div#port__button img').each(function() {
        $(this).attr('src', $(this).data('src'));    
    }) }
$(function() {
   $('#port__button').on('click', getajax);
})

Этот код добавляет к тегу img атрибут src

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

[Владимир Проскурин]

Ринат Хайсман, искать картинку только в открытом окне, которое с классом remodal-is-opened

function getajax(){ $('.remodal-is-opened .popap_form_left img').each(function() {
        $(this).attr('src', $(this).data('src'));    
    }) }
$(function() {
   $('#port__button').on('click', getajax);
})

[Ринат Хайсман]

Владимир Проскурин, не работает :(

[Владимир Проскурин]

Ринат Хайсман, это потому, что клик на вашу кнопку срабатывает раньше, чем блок получит класс remodal-is-opened. Если глянуть API этого плагина, можно найти событие открытия модального окна, которое еще указывает какое окно открылось. Короче получилось так, просто киньте этот код в JS.

$(document).on('opening', '.remodal', function () {  
  var $image = $(this).find('img[data-src]');
  $image.attr('src', $image.data('src'));
});

[Ринат Хайсман]

Владимир Проскурин, Спасибо большое, все заработало! У вас есть телеграм?

[Владимир Проскурин]

Ринат Хайсман, для чего? Если есть вопросы, то задавайте в рамках тостера, тут и я помогу и остальные коллеги.