StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POjQuery delay until background image is loaded, then faded in?
text
Body
copied!<p>I've been doing alot of research and there are loads of plugins and tutorials out there that cover the use of large background images. Unfortunately, they all have one thing in common - they use absolutely positioned images to behave as "fake" background images.</p> <p>Normally that would work fine for me and I've done that before, however, this project has a repeating background image, so it's necessary that I use normal CSS rules to declare the background image.</p> <p>All of that being said, is there a way to check to see if the image is loaded and tell jQuery to fade this background image in once it is loaded? The main thing I'm looking for is a way for jQuery to verify that the image is actually loaded. If not, then I suppose I need to settle for a simple static delay (which unfortunately ruins the effect for users who have slow connections). </p> <p>Last thing - can this be done via CSS class switching/toggling so that I can change the body class before and after the image is loaded? This would be a fallback for users without javascript and would make it so I don't have to <code>.hide()</code> my entire body while the background image loads.</p> <p><strong>*EDIT: This thread seems to have a similar discussion but I don't think it's quite the same thing: <a href="https://stackoverflow.com/questions/4937127/how-do-i-delay-html-text-from-appearing-until-background-image-sprite-is-loaded">How do I delay html text from appearing until background image sprite is loaded?</a> *</strong></p> <p><strong>* EDIT 2 *</strong></p> <p>Looks like the above thread worked after all, except I'm still missing the fadeIn effect. I set the fadeIn intentionally high and it's not animating for some reason, any ideas why?</p> <pre><code><script> $(function() { // create a dummy image var img = new Image(); // give it a single load handler $(img).one('load',function() { $('html').css('background','url(<?php bloginfo( 'template_url' ); ?>/images/red_curtain.jpg) top center repeat-y').fadeIn(12000); // fade in the elements when the image loads }); // declare background image source img.src = "<?php bloginfo( 'template_url' ); ?>/images/red_curtain.jpg"; // make sure if fires in case it was cached if( img.complete ) $(img).load(); }); </script> </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload