Загрузить Iframe при определенных условиях

@Lynatik001 · Регистрация: 28.09.2012

Студворк — интернет-сервис помощи студентам

Доброго всем времени суток.
У меня В конце лендоса. 2карты от яндекс. Вот так как после проверки на скорость сайта(гугл инструментом) решил надо розгрузить немного вес страницы. что бы быстро загружалось.
Ибо 90% посетителей это люди что заходят с телефона.

Решил 2 карты эти не грузить пока пользователь не проскролится в футер сайта(они находятся там).
Есть может какие способы готовые и по проще. А то я это себе уже представляю тоже что я сделал и с модальными окнами

JavaScript
1
2
3
4
5
       
$(document).on('show.bs.modal', function (e) {
  $(this).find('iframe').attr('src', getSrc);
  function getSrc() { return $(this).data('src'); }
})

только событие найти какое, что сообщало бы, когда пользователь почти проскролился до карт.
Или может я все же мудрю и есть что то весьма простое, что давно уже все юзают:?)

@Lazy_Den · 24.04.2019, 01:55

Сообщение от Lynatik001

после проверки на скорость сайта

А вы уверены, что причина проблем, если они и наблюдаются, именно в картах? Я уже давненько не имел дел ни с картами Google, ни Яндекс, но если мне память не изменяет, то загрузка их происходит асинхронно, а значит и не должна вызывать особых осложнений.

@Lynatik001 · 24.04.2019, 11:58 **[ТС]**

Сообщение от Lazy_Den

А вы уверены, что причина проблем, если они и наблюдаются, именно в картах? Я уже давненько не имел дел ни с картами Google, ни Яндекс, но если мне память не изменяет, то загрузка их происходит асинхронно, а значит и не должна вызывать особых осложнений.

я знаю что проблема не в картах. просто пытаюсь уменьшить колво мегабайт, что надо загрузить, что бы загрузилась полностю страница. Проблема у меня описана в другой теме Неправильно отображается запись сайта в вебвизоре.
Просто модератор вертит ей как хочет. и называет вебвизор ошибка. Хотя я понял, что ето скорее всего проблема в том, что пользователи сайта, долго грузят 4мб страницы(https://developers.google.com/... hts/?hl=ru)

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

Кстати я думаю что я иду по правельному пути. ибо видно даже на компе, когда оч бистро обновлять страницу. аналогичную траблу. (когда яваскрипт не загрузился, и все слайды выглядят как куча картинок)
- решил половину проблемы тем что поместил их из src в data-lazy. но блоки что слайдятся таким способом не спрячешь))

@Lynatik001 · 26.04.2019, 11:35 **[ТС]**

кстати вот как теперь подгружаю карты

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var target = $('#dost');
var targetPos = target.offset().top;
var winHeight = $(window).height();
var scrollToElem = targetPos - winHeight;
$(window).scroll(function(){
  var winScrollTop = $(this).scrollTop();
  if(winScrollTop > scrollToElem && $('.maps').attr('src') == null){
    //сработает когда пользователь доскроллит к элементу с классом .elem
 
  $(document).find('.maps').attr('src', getSrc);
  function getSrc() { return $(this).data('src'); }
 
  }
});

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG-файла с альфа-каналом с помощью библиотеки SDL3_image на Android 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом