2

我想提高一个页面的加载性能，该页面有一个按钮来触发最初隐藏在页面上的弹出窗口（使用来自 twitter bootstrap 的“模态”组件）。此弹出正文包含一个 iframe，该源在页面初始加载时加载，但加载时间增加了约 30-40%。在单击按钮之前不需要加载 iframe 源，这会弹出带有 iframe 的弹出窗口。如何避免在初始页面加载时加载 iframe 源？...仅在单击按钮时加载 iframe 源？这里可以用JS吗？如果是这样，那么如何或什么方法/库？有没有比隐藏在页面中的 iframe 弹出窗口更好的方法来缩短加载时间？谢谢你

4

2 回答 2

2

这可以通过 JavaScript 实现（不需要额外的库）。单击链接或按钮时，只需使用一个函数来设置 src/显示框架。

function loadIFrame(frameID, url) {
    var frame = document.getElementById(frameID);
    frame.setAttribute('src', url);
    frame.style.display = 'block';
}

请参阅此处的示例：http: //jsfiddle.net/ZNGmy/

于 2013-08-27T02:15:43.197 回答
2

与其将弹出窗口作为隐藏容器并通过按钮可见，不如将带有 iframe 内容的弹出窗口作为单独的 html 页面，通过按下按钮显示。这样，在按下按钮之前不会加载内容。

此链接有一个弹出 html 页面的示例。 http://allwebco-templates.com/support/S_add_pop.htm

于 2013-08-27T02:16:25.143 回答