title: Prevent iframes and images from loading with jquery
body: <p>i am currently working on a social networking website ,on front page it has a jquery <a href="http://jqueryui.com/demos/accordion/" rel="nofollow">accordion</a> with following options</p>
  
  <pre><code>$( "#accordion" ).accordion({
         autoHeight: false,
         animate:"fast",
         active: false,
         collapsible: true });
  </code></pre>
  
  <p>,each section of accordion has either a iframe[iframe or object or embed] containing video from different sources like youtube,vimeo,dailymotion,bliptv,scribd(doc) etc or images from flickr ,imgur etc  wrapped in </p>
  
  <pre><code>&lt;div class="embed-container"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>within .ui-accordion-content</p>
  
  <p>On page load all these iframe and images starts loading and make page really slow
  what i want is</p>
  
  <p>1) Stop content of embed-container div from loading completely on page load</p>
  
  <p>2) when a particular accordion section opens ,then embed-container div of that section should load</p>
  
  <p>3)  when accordion section closed ,embed-container div iframe or images should cease all loading</p>
  
  <p>so far i have tried this</p>
  
  <pre><code>$('.embed-container').hide();
  
  $('.ui-accordion').bind('accordionchangestart', function(event, ui) {
  ui.newContent.find('.embed-container').show();
  ui.oldContent.find('.embed-container').hide();
  });
  </code></pre>
  
  <p>Looking for a Crossbrowser solution(ie7+,ff3+,chrome)
  Thanks</p>