Question

我想提高一个页面的加载性能，该页面有一个按钮来触发最初隐藏在页面上的弹出窗口（使用来自twitter bootstrap的'modal'组件）。这个弹出框体包含一个iframe，该页面加载了一个内部加载，但是加载的时间增加了大约30-40％。在点击按钮之前不需要加载iframe源，这会打开带有iframe的弹出窗口。如何避免在初始页面加载时加载iframe源？ ...仅在单击按钮时加载iframe源？可以在这里使用JS吗？如果是这样，那么方法/库如何或者是什么方法？有没有比使用隐藏在页面中的iframe弹出窗口更好的方法来改善加载时间？谢谢

Answer 1

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

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

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

Answer 2

不是将弹出窗口设置为按钮可见的隐藏容器，而是使用iframe内容弹出一个单独的html页面，按下该按钮即可显示该页面。这样，在按下按钮之前不会加载内容。

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

如何避免加载iframe的源代码

2 个答案: