Предотвращение загрузки iframe на мобильном телефоне

Question

Я работаю над своей страницей портфолио, и хочу, чтобы мои проекты были в демонстрационном режиме, когда пользователь может просматривать сайты в разных видовых экранах. Я получил эту идею отсюда: http://my.studiopress.com/themes/genesis/#demo-full

На мобильных устройствах я хотел бы сохранить iframes от загрузки, а вместо этого ссылки на проекты открывают сайты на новой вкладке.

Если у меня есть div, содержащие iframe, скрытые в самой верхней части моего CSS-файла с отображением: none, я могу видеть, что iframes все еще загружается в фоновом режиме, и страница занимает много времени, чтобы загрузить.

Есть ли способ удержать их от загрузки вообще при использовании определенного устройства или размера видового экрана?

Answer 1

Вы можете достичь этого, используя JavaScript и атрибут Data Data Attribut. Установив src-Attribute на что-то вроде «#», он ничего не загрузит. Вы можете использовать атрибут data-Attribute для хранения URL-адреса для использования с JavaScript.

<iframe src="#" data-src="https://placekitten.com/200/300" frameborder="0"></iframe> 

Тогда вы просто проверить размер с window.matchMedia (экран) и установите Src-атрибут определенного размера экрана.

var $iframe = $('iframe'), 
    src = $iframe.data('src'); 

if (window.matchMedia("(min-width: 480px)").matches) { 
    $iframe.attr('src', src); 
} 

Вот рабочий пример: https://jsfiddle.net/5LnjL3uc/

Если вы хотите, чтобы показать IFRAME, когда пользователь изменяет размер окна необходимо поместить код в функцию и привязать его к событию изменения размера:

var $iframe = $('iframe'), 
    src = $iframe.data('src'); 

function showIframe() { 
    if (window.matchMedia("(min-width: 480px)").matches) { 
     $iframe.attr('src', src); 
    } 
} 

$(window).on('resize', showIframe); 

// Initialize it once on document ready 
showIframe(); 

Рабочий пример: https://jsfiddle.net/5LnjL3uc/1/