Как реализовать отложенную загрузку изображений во всплывающем окне?

Question

[Denis Shutin]

Добрый день!
Имеется одностраничный сайт, на котором реализованы popup элементы с множеством картинок внутри. Код, из которого ясна текущая реализация, привожу в конце вопроса. Сам вопрос, собственно, в следующем.
Картинки достаточно тяжелые и их довольно много. Полагаю, что в отдельных случаях браузер может начать загружать их вместе с основным контентом сайта, что возьмет у пользователя много трафика и сильно затянет процесс загрузки, что совершенно нежелательно. В связи с этим хотелось бы, чтобы картинки, показывающиеся во всплывающем окне, начинали загружаться только при открытии соответствующего окна. Нечто похожее делает lazy load из jquery, но он начинает подгружать картинки только по факту их появления в зоне видимости, а хотелось бы, чтобы все картинки из попапа подгружались вместе разом при его открытии.
Возможно, это можно каким-то образом повесить на oncklick, который и инициирует открытие окна. Однако опыт мой в верстке и JS стремится к нулю, а готовых решений не нашел. Сам сайт создан и хостится на конструкторе сайтов и поэтому ограничен в свободе действий, хотя позволяет с извращениями добавлять собственные фрагменты вроде приведенных ниже. В связи с этим прошу помочь в решении проблемы опытных людей - подозреваю, что решение может быть достаточно банальным.

Код-пояснение.
Ссылка, по которой открывается попап:

<a href="javascript:void(0)" onclick="document.getElementById('parent_popup_click').style.display='block'; document.body.style.overflow = 'hidden';">Ссылка</a>

Скрипт, на котором все работает:

<script type="text/javascript">
$('.popup .close_window, .overlay').click(function (){
$('.popup, .overlay').css({'opacity': 0, 'visibility': 'hidden'});
});
$('a.open_window').click(function (e){
$('body').css('position','fixed');
$("body").css({"position":"fixed"});
$('.popup, .overlay').css({'opacity': 1, 'visibility': 'visible'});
e.preventDefault();
});
</script>

И сам код всплывающего окна с контентом:

<div id="parent_popup_click" onclick="document.getElementById('parent_popup_click').style.display='none';   document.body.style.overflow = 'auto';">
  <div id="popup_click">
   <center> 
<img title="" src=" ..... Картинка 1 ....." alt="" />
<img title="" src=" ..... Картинка 2 ....." alt="" />

<img title="" src=" ..... Картинка n ....." alt="" />
  </center>
    <a class="close" title="Закрыть" onclick="document.getElementById('parent_popup_click').style.display='none'; document.body.style.overflow = 'auto';">X</a>
</div>
</div>

Answer 1

[# a r t u r #]

В вашем случае можно "рисовать" картинки динамически, перебирая их в цикле

Плюсы и минусы этого метода с примером - https://habrahabr.ru/sandbox/25035/