ajax асинхронная загрузка изображения
 

Привет кодерам) бьюсь 2 сутки над проблемой облазил все просторы подскажите направление решения проблемы)
Есть лэндинг на нем 15 превью по клику через модальное окно arctic.modal вызывается другое тяжелое изображение. Структуру html прописал так что браузер с самого начала грузит все 15 скрытых тяжелых фулл изображений, как сделать загрузку в модальном окне только по вызову?
Вот пример структуры:
<div class="color-1">
<div class="hide"><a class="md-trigger" href="#modal" onclick="$('#color-1').arcticmodal()"><img src="images/color-1.jpg" alt=""></a></div>
<div class="color-info"> </div>

А это уже вызов фулл изображения

<div class="pop-up-img md-effect-16 box-modal" id="color-1">
<span class="modal_close box-modal_close arcticmodal-close"></span>
<div class="color-info">
<h3>ТЕКСТ<br />текст<br />текст</h3> </div>
<img class="lazy" src="images/full-1.jpg" alt=""> </div>

Браузер не грузит картинки которые скрыты через display:none (сама картинка или блок в котором она находится)

благодарю. display: none скрыл из DOM загрузке а как вернуть что бы после вызова модального окна он ее загрузил?

это вариант помогает не во всех браузерах так что проблема все таже грузит сразу все 15 скрытых фулл изображений общим весом около 20 мб (( кстати блоки модальных окон и скрытых изображений уже в общем div были display:none

Вы можете вообще не добавлять эти картинки в html, а добавлять их скриптом при открытии модального окна

подскажите что именно мне искать в этом направлении? :help:

РЕШЕНИЕ НАЙДЕНО! fancyBox :D

Можно пойти 2 способами:
1) добавлять верстку через innerHTML:

function onOpenModal() {
    document.querySelector(".someImageContainer").innerHTML = "<img src='someImage.png'/>";
}

2) Добавлять картинку к существующему HTML коду. Второй вариант гибче и позволяет делать прелоадеры:

function onOpenModal() {
    var image = new Image();
    image.onload = function () {
        document.querySelector(".someImageContainer").appendChild(this);
    }
    image.src = "someImage.png";    
}