Подгрузка изображений по требованию (клику)

[r_219]

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

 

[2cher777]

Попробуй замену innerHTML в DIV элементе.

 

[Q_BASIC]

Подключи js галерею какую-нибудь просто

Первое из гугла: Для просмотра ссылки Войди или Зарегистрируйся

 

[r_219]

Подключи js галерею какую-нибудь просто

Первое из гугла: Для просмотра ссылки Войди или Зарегистрируйся

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

 

[r_219]

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

Но как это сделать?

 

[2cher777]

Но как это сделать?

Попробуй замену innerHTML в DIV элементе.

в объекте изображения:
<div id="img001"><img id="small" onmouseout="showBigImage()"...</div>
в showBigImage() функции пишешь подмену innerHTML содержимого элемента div с определенныи ID, на код ссылки с изображением большой картинки.
p.s. и не забудь в новый код обратное событие вставить.

 

[r_219]

Вопрос решен, тему можно закрывать.

 

[2cher777]

Вопрос решен, тему можно закрывать.

Ну так и что в итоге? Как решил задачу?

 

[r_219]

У меня стоит плагин для модалок - remodal.js. Если глянуть API плагина, можно найти событие открытия модального окна, которое еще указывает какое окно открылось.

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

В итоге все идеально работает. На тостере подсказали. Сайт теперь летает, потому что я пошел дальше - поставил lazy load практически на все изображения, включая фоновые.

 

[Mr.Varenik]

Вариант 1(простой

$(".click_img").on("click", function(){
var obj = $(this).parrent();
obj.html('<img src="loader.gif">');
obj.html('<img src="image.png">');//Ваше изображение
});

<div class="div">
<img class="click_img" src="now_image.gif">
</div>
Вариант 2( с ajax подгрузкой

$(".click_img").on("click", function(){
var obj = $(this).parrent();
obj.html('<img src="loader.gif">');
$.ajax({
type: "POST",
url: "some.php",
data: "name=test", //если нужно
success: function(data){
obj.html(data);
}
});

});

<div class="div">
<img class="click_img" src="now_image.gif">
</div>
в файле some.php вы выводите Ваше изображение(я

echo '<img src="image.png">';//Ваше изображение