在调整大小时延迟加载 YouTube答案

【问题标题】：Lazy Load YouTube on Resize在调整大小时延迟加载 YouTube
【发布时间】：2015-03-03 15:34:12
【问题描述】：

我有 2 个不同的 YouTube 视频，适用于 2 个特定的屏幕宽度。

我想动态加载每个视频，仅在访问者点击该屏幕尺寸时才加载，而不是在加载文档时加载它们。

<div id="size1000">
  <iframe width="250" height="250" src="https://www.youtube.com/embed/tR-5AZF9zPI" frameborder="0" allowfullscreen></iframe>
</div>
<div id="size500">
  <iframe width="200" height="200" src="https://www.youtube.com/embed/tR-K69A1lL1PHQ" frameborder="0" allowfullscreen></iframe>
</div>

css

#size1000, #size500{
   display:none;
}
@media(width:1000px){
    #size1000{
      display:block;
    }
}
@media(width:500px){
    #size500{
      display:block;
    }
}

这可能吗？如果是这样，这是如何完成的？

【问题讨论】：

如果您提供了相关的 HTML，然后有人可以通过填写空白来提供帮助，而不必创建整个场景来说明解决方案的实施方式，这将很有帮助。
我同意，但它会帮助您通过减少潜在的乐于助人的人提出解决方案所需的工作量来回答您的问题。此外，一般来说，代码问题更容易得到仔细研究。

标签： javascript performance youtube embed lazy-loading

【解决方案1】：

由于我误解了您的要求，这里有一个简单的示例，它使用 Javascript 检测客户端宽度并根据屏幕大小显示正确的 YouTube 标记（如果有）。

Here's another Plunk。与 with media query 示例不同，每次更改帧宽度后，您都需要停止并重新运行它。

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>
  <script>
    if (document.body.clientWidth >= 1000) {
      document.write('<iframe width="250" height="250" src="https://www.youtube.com/embed/tR-5AZF9zPI" frameborder="0" allowfullscreen></iframe>');
    } else if (document.body.clientWidth >= 500) {
      document.write('<iframe width="200" height="200" src="https://www.youtube.com/embed/tR-K69A1lL1PHQ" frameborder="0" allowfullscreen></iframe>');
    }

  </script>
</body>

</html>

这不能处理动态变化的显示尺寸，例如方向变化。你必须抓住事件才能做到这一点。但它向您展示了基础知识。

更新：这是对屏幕调整大小事件进行操作的基本形式。这里应该有很多问题来处理这个问题。

window.onresize = function(event) {
    ...
};

我希望这就是你的意思。如果没有，我放弃。 ;)

【讨论】：

嘿，这还不错。您是否知道条件是否在加载文档或点击屏幕尺寸时向 youtube 发出请求？
@propster 加载文档时。就像我提到的，它不是动态的。它在加载时根据页面尺寸做出决定。我添加了一个小片段，展示了如何获取大小更改事件。
我明白了，所以我还是要明确我的问题。感谢您帮助我做到这一点:)

【解决方案2】：

这个呢？如果屏幕宽度在 500 到 999px 之间只显示第一个，另一个只在 1000px 或更大时显示？

#size1000, #size500{
   display:none;
}
@media(min-width:500px) and (max-width: 999px) {
    #size500{
      display:block;
    }
}
@media (min-width:1000px){
    #size1000{
      display:block;
    }
}

请注意，这会同时加载两者，但只显示一个（或在小屏幕上不显示）。如果视频是自动播放的，那可能是个问题。

这是一个有效的Plunk demo of it。

【讨论】：

我想你误会了。在访问者达到该屏幕尺寸之前，我不希望加载任何视频。这与CSS无关
感谢您试一试。
如果宽度小于 500 则根本不显示任何内容。尝试将 plunk 中的窗口调整为小于 500，您将看不到任何视频。这就是 min-width: 500px 存在的原因，因此您需要至少达到该尺寸才能看到 size500。
你不懂。这不是看视频。这是关于在后台加载视频的浏览器。这是一个优化性能的问题。
你说得对，我不明白。您应该改进您的问题，以明确您正在寻找什么。相反，您需要使用 Javascript 来检测屏幕大小并适当地呈现。您根本不是在寻找媒体查询，因此您可能应该将其从您的问题中删除，因为它具有误导性。