Question

我正在我的投资组合页面上工作，我希望我的项目处于演示模式，用户可以在不同的视口中预览网站。我从这里得到了这个想法： http://my.studiopress.com/themes/genesis/#demo-full

在移动设备上，我想保留iframe加载，而是有项目链接在新标签中打开网站。

如果我将包含iframe的div隐藏在我的CSS文件的最顶部并且显示为：none，我可以看到iframe仍然在后台加载，并且页面需要很长时间才能加载。

在特定设备或视口尺寸上，有没有办法阻止它们加载？

Answer 1

您可以使用JavaScript和HTML Data-Attribut来实现这一目标。通过将src-Attribute设置为＆＃34;＃＆＃34;它不会加载任何东西。您可以使用data-Attribute存储用于JavaScript的URL。

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

然后，您只需使用window.matchMedia（）检查屏幕大小，并将src-attribute设置为特定的屏幕大小。

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

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

以下是一个工作示例：https://jsfiddle.net/5LnjL3uc/

如果要在用户调整窗口大小后显示iframe，则需要将代码放入函数并将其绑定到resize事件：

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/

Answer 2

一个更好的解决方案是反向处理。

例如，IE不会通过将URL放在诸如“ data-src”之类的属性中来加载src。

请参阅下面的代码。您只需在设备或设备宽度不是移动设备/移动设备大小时将data-src复制到src中即可。

我相信这是最好的解决方案，因为没有不确定性。使用前面提到的解决方案（我尝试过），您可以与浏览器争分夺秒地运行代码，并决定何时加载iframe src。

if(device !== true) {
  // add '#' to the href
  let iframe = document.getElementById('3dExperience')
  iframe.src = iframe.getAttribute('data-src')
}

注意：“设备”是is-mobile npm软件包，用于检测移动设备。

防止在移动版

2 个答案: