Question

我有多个动态填充源的iFrame。页面非常慢，因为一次加载了很多iframe，所以我想阻止它们加载，直到某个事件发生（就像按下每个框架旁边的按钮）。

我认为是一个hack，我将源存储到其名称字段中，然后使用javascript将源设置为按下按钮上的名称。我不知道这是否会起作用，无论如何它似乎是一个肮脏的黑客。必须有更好的解决方案吗？

Answer 1

你可以使用jquery来建立标记aync（在事件发生时说话）。

例如：

你有一个div-container <div id"myDiv"></div>

您可以使用jquery-selector来获取此div：

var myDiv = $('#myDiv');

一旦您可以访问此内容，就可以动态地将内容添加到其中。

var myIFrame = $('<iFrame></iFrame>');
myIFrame.attr("src", "http://myFavouriteSite.com");

围绕此构建函数时，可以通过单击按钮调用此函数：

function renderAnIFrame{
  var myDiv = $('#myDiv'); //get selector

  var myIFrame = $('<iFrame></iFrame>'); //dynamicly construct an iFrame
  myIFrame.attr("src", "http://myFavouriteSite.com"); // add sourc-attribute to iFrame

  myDiv.append(myIFrame); //Interlace iFrame into Div-Container
}

所有这些都发生在使用文档就绪的按钮点击事件上：

    <button type="button" id="btn-render-iFrame">
     </button>

$(document).ready(function () {
    $('#btn-render-iFrame').click(function () {
        renderAnIFrame ();
    });
});

Answer 2

试试这个模型。我使用方法when和then。在加载前一个iframe之后，iframe将被加载到链中。

jsfiddle

<iframe id="iframe1" /><br/><br/>
<iframe id="iframe2" /><br/><br/>
<iframe id="iframe3" /><br/><br/>

function loadIframe(iframe){
   $('#'+iframe).attr('src', 'jsfiddle.net');
   alert(iframe + ' loaded');
}

 $.when(loadIframe('iframe1'))
   .then(loadIframe('iframe2'))
   .then(loadIframe('iframe3'));

延迟iFrame加载其src直到调用函数？

2 个答案: