Prevent loading iframe and images with jquery

I am currently working on a social media site, on the first page it has a jquery accordion with the following parameters

$( "#accordion" ).accordion({
       autoHeight: false,
       active: false,
       collapsible: true });


each accordion section has either an iframe [iframe or object or embed] containing videos from different sources like youtube, vimeo, dailymotion, bliptv, scribd (doc), etc. or images from flickr, imgur, etc. wrapped in

<div class="embed-container"></div>


inside .ui-accordion-content

On page load, all these iframes and images start to load and make the page very slow I want

1) Stop the div content of the inserted container from fully loading on page load

2) when a specific accordion section is opened then the div in that container should load

3) when the accordion section is closed the embed-container div iframe or images should stop all loading

so far i have tried this


$('.ui-accordion').bind('accordionchangestart', function(event, ui) {


Looking for Crossbrowser solution (ie7 +, ff3 +, chrome) Thanks


source to share

2 answers

you can load the contents of the accordion dynamically so that at boot time they contain nothing. then you can assign a "fold id" to each fold to indicate which click was clicked and AJAX load the appropriate content. this way, only what we want to see is loaded, and not everything.

    <a href="#3">Section 3</a> //this example uses href as an id
        accordion contents


then in pseudocode we get dynamic content using AJAX:





you can just set the "src" attribute of the iframe for youtube, vimeo, etc. only after the user clicks on the accordion section.


$('.ui-accordion').bind('accordionchangestart', function(event, ui) {
   ui.newContent.find('.embed-container iframe').attr('src', '');




All Articles