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

Question

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

我考虑了一种技巧，将源存储到其名称字段中，然后使用 javascript 将源设置为等于按下按钮时的名称。我不知道这是否可行，而且无论如何这似乎是一个肮脏的黑客行为。一定有更好的解决方案吗？

Answer 1

试试这个模型。我使用方法when和then. 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'));

Answer 2

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

例如：

你有一个 div 容器<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
}

所有这一切都发生在使用 document-ready 的按钮单击事件上：

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

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