iFrame 最佳实践

题

我为我正在设计的网站设计了一个大型、高清 JavaScript 密集型图像横幅。大家对使用 iframe 以便只需要一次加载时间有何看法？有没有 iframe 的 CSS 替代品？

这是一项正在进行中的工作。

解决方案

我还应该提到，我希望横幅旋转能够继续移动。当访问者单击链接时，横幅旋转就会重新开始。如果无论用户访问哪个页面，“动画”都能持续旋转，那就太好了。Blockquote

好吧，在这种情况下，我强烈建议不要这样做。实现这一目标的唯一真正方法是在 iframe 中包含实际的网站内容，这意味着您突然对网站产生了很多负面影响：由于地址栏没有改变，无法轻松地为网址添加书签；可访问性问题；ETC

我想你会发现大多数人不会关心它是否会再次重新加载。一旦访问者登陆您的网站，他们会立即惊叹于精彩的横幅，然后在浏览您的网站时继续忽略它 - 直到出现他们没有见过的图像并分散他们对您的内容的注意力。

保持旋转足够随机，并提供足够的图像，人们就会停下来从他们所在的任何页面上查看它。

其他提示

我发现 iFrame 标头的主要挑战是调整大小。由于标题中的字体是静态大小，因此我认为使用 iFrame 没有问题。虽然我不确定它是否真的足够密集值得。

嗯，浏览器似乎在第一次加载时缓存了所有七个横幅图像，然后从缓存中运行它们（对于每个后续页面）。我不认为你有问题:D

在 Firefox 中使用 Firebug 的网络监控工具进行尝试。

这在没有 CSS 的情况下也可以工作，但是如果您使用 CSS 加载背景并且您的服务器配置正确，则图像应该只下载一次。

通常，浏览器仅在自上次下载以来未曾修改过的情况下才会请求资源。在这种情况下，来回发送的唯一内容是 HTTP 标头，没有内容。

如果您想确保图像只下载一次，请添加 .htacces 或 apache2.conf 规则，使图像在未来几天内过期，以便用户仅在缓存被清除或内容过期时才会再次请求它日期过去了。.htaccess 文件可能过多，无法在您的情况下使用，但结果可能会有所不同。

您可以让它加载一次主页，然后在需要时异步加载其他元素（ajax）。如果您这样做，则不需要 iFrame。这是仅加载新材料的示例.

虽然使用 IFrame 作为页面的母版页/模板可能是一件好事，但 IFrame 对可搜索性/SEO 具有已知的负面影响。

首先，这也可能是不必要的，因为一旦您的图像第一次加载（并且对于您网站上的大型高清图像，这会很慢）无论你这样做）图像由浏览器缓存，并且在用户清除缓存或执行以下操作之前不会重新加载 控制键+F5.

许可以下： CC-BY-SA 和归因