Name: Anonymous 2010-04-04 13:16
Is it possible to have content in a hidden div that doesn't load until it is revealed? I know you got dem answers /prog/.
.hidden-div { display: none; } and go back to Stack Overflow where it belongs.<object> tag inside the <div>. then it's up to the browser to decide when to load it and whether to do it synchronously or asynchronously. if the users don't like the way their browser does it, it's not your problem.
<html>
<head>
<title>jQuery Load Event Test</title>
</head>
<body>
<input type="button" value="Reveal Dat Div" />
<div id="reveal" style="display: none"></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('body').bind('onReveal', function() {
$('#reveal')
.html('<img src="http://anime-wallpapers.com/images/1024x768/ash-and-pikachu.jpg" alt="loads when event is triggered" />')
.show();
/*
if you want to wait until the content in that div is fully loaded before you show(),
you'll need to attach load listeners to all the child img, script, iframe, etc.
in this case, you're probably better off using ajax get() instead.
*/
});
$('input:button').click(function() {
$('body').trigger('onReveal');
});
});
</script>
</body>
</html>document.write("<html>");