Задержка iFrame от загрузки его src до вызова функции?

Question

У меня есть несколько iFrames, которые динамически заполняются источниками. Страница довольно медленная, потому что так много фреймов загружаются сразу, поэтому я хотел бы предотвратить их загрузку до тех пор, пока не произойдет определенное событие (например, кнопка рядом с каждым нажатым кадром).

Я рассмотрел взлом, в котором я храню источник в его поле имени, а затем использую javascript для установки источника, равного имени при нажатии кнопки. Я не знаю, будет ли это работать, и, похоже, это грязный хак. Должно быть лучшее решение?

Answer 1

Вы можете использовать jquery, чтобы создать разметку aync (говоря при возникновении события).

Например:

у вас есть Div-контейнер <div id"myDiv"></div>

Вы можете использовать JQuery-селектор, чтобы получить этот 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. Фреймы будут загружены в цепочку после загрузки предыдущего.

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'));