Iframe preload

Question

function toggle(){ $("#tempc").toggle( function () { $("#tempc").animate({width: 255, height: 220}, 1000); $("#tempc").html(""); $("#tempc").css("background-color", "transparent"); $("#tempc").html("<iframe src='/src/stream.php?stream=1' width='255' height='225' frameborder='0' scrolling='no'></iframe><br><a href='javascript:;' onclick='hidegadget();' class='yellowblock'>Sluit</a>"); }, function () { $("#tempc").animate({width: 50, height:50}, 1000); $("#tempc").html(""); $("#tempc").css("background-color", "#FFFF00"); $.get('src/stream.php?stream=2', function(data002) { $('#tempc').html(data002); }); } ); } $.get('src/stream.php?stream=2', function(data002) { $('#tempc').html(data002); }); 

Hi stackoverflow,

Some time ago, I tried to animate a div, well, now this only works. When the first function is activated (start line 3) and the iframe is loaded. But now, how can I preload this iframe? Because when the animation is finished, the iframe does not load ...

Hello

Answer 1

With jQuery you do not need to use iframes. Take a look at the .load () function. http://api.jquery.com/load

i.e.

 $('#tempc').load('src/stream.php?stream=1'); 

To preload the page, just create a hidden div and show it when you're ready.

 var stream2 = $('<div>').load('src/stream.php?stream=2').hide(); $('#tempc').html(stream2.html()); 

Answer 2

Start by loading the iframe, connect to onLoad in the iframe (this may give you a headache on its own, but a little google search should show you how to make this work well with a cross-browser) and start the animation from this event.