CODEWITHSUNDEEP
javascriptjqueryperformanceiframe
latvian
latvian

Reputation: 3215

how to avoid loading the source for iframe

I would like to improve loading performance for a page that has a button to trigger a popup initially hidden on the page (uses 'modal' component from twitter bootstrap). This popup body contains an iframe, which source is loaded on the page inital load adding about 30-40% more time to load, however. The iframe source is not needed to be loaded till the button is clicked which brings up the popup with the iframe. How can one avoid loading the iframe source on initial page load? ...only load the iframe source when the button is clicked? Can JS be used here? If so, then how or what method/library? Is there a better approach than make popup with iframe hidden in the page to improve loading time? Thank You

Upvotes: 2

Views: 834

Answers (2)

jtmulls18
jtmulls18

Reputation: 129

Rather than having the pop-up as a hidden container that is made visible by the button, make the pop-up with the iframe content a separate html page that gets displayed by pressing the button. This way the content is not loaded until the button is pressed.

This link has an example of popping-up html pages. http://allwebco-templates.com/support/S_add_pop.htm

Upvotes: 2

Oscar Barrett
Oscar Barrett

Reputation: 3265

This is possible with JavaScript (no extra libraries required). Simply use a function to set the src/display the frame when a link or button is clicked.

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

See the example here: http://jsfiddle.net/ZNGmy/

Upvotes: 2

Related Questions