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,
animate:"fast",
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
$('.embed-container').hide();
$('.ui-accordion').bind('accordionchangestart', function(event, ui) {
ui.newContent.find('.embed-container').show();
ui.oldContent.find('.embed-container').hide();
});
Looking for Crossbrowser solution (ie7 +, ff3 +, chrome) Thanks
source to share
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.
<h3>
<a href="#3">Section 3</a> //this example uses href as an id
</h3>
<div>
<p>
accordion contents
then in pseudocode we get dynamic content using AJAX:
$.get('url_of_resources?itemid='+itemHref,function(data){
$('div_of_accordion').html(data);
});
source to share
you can just set the "src" attribute of the iframe for youtube, vimeo, etc. only after the user clicks on the accordion section.
eg.
$('.ui-accordion').bind('accordionchangestart', function(event, ui) {
ui.newContent.find('.embed-container iframe').attr('src', 'http://www.vimeo.com');
});
source to share