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

Тема в разделе "JavaScript", создана пользователем r_219, 22 апр 2018.

  1. r_219

    r_219 Постоялец

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

    2cher777

    Регистр.:
    10 мар 2018
    Сообщения:
    258
    Симпатии:
    95
    Попробуй замену innerHTML в DIV элементе.
     
  3. Q_BASIC

    Q_BASIC

    Регистр.:
    30 ноя 2013
    Сообщения:
    456
    Симпатии:
    1.162
    Подключи js галерею какую-нибудь просто

    Первое из гугла: http://photoswipe.com/
     
    dana77 нравится это.
  4. r_219

    r_219 Постоялец

    Регистр.:
    20 мар 2015
    Сообщения:
    105
    Симпатии:
    35
    Но мне не нужна галерея обыкновенная, мне нужно, чтобы реализация была как у меня на сайте. Просто показ фото не подходит, к сожалению.
     
  5. r_219

    r_219 Постоялец

    Регистр.:
    20 мар 2015
    Сообщения:
    105
    Симпатии:
    35
    Подсказали такой вариант: Чтобы содержимое не грузилось с сайтом, нужно кинуть его в отдельный html файл и грузить через ajax.

    Но как это сделать? :oops:
     
  6. 2cher777

    2cher777

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

    r_219 Постоялец

    Регистр.:
    20 мар 2015
    Сообщения:
    105
    Симпатии:
    35
    Вопрос решен, тему можно закрывать.
     
  8. 2cher777

    2cher777

    Регистр.:
    10 мар 2018
    Сообщения:
    258
    Симпатии:
    95
    Ну так и что в итоге? Как решил задачу?
     
  9. r_219

    r_219 Постоялец

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

    Код:
    $(document).on('opening', '.remodal', function () {
      var $image = $(this).find('img[data-src]');
      $image.attr('src', $image.data('src'));
    });
    В итоге все идеально работает. На тостере подсказали. Сайт теперь летает, потому что я пошел дальше - поставил lazy load практически на все изображения, включая фоновые.
     
    2cher777 нравится это.
  10. Mr.Varenik

    Mr.Varenik

    Регистр.:
    5 янв 2018
    Сообщения:
    291
    Симпатии:
    44
    Вариант 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">';//Ваше изображение