Question

I have a problem. Inside a generated by PHP file I have a jQuery gallery plugin which should make display:none to all the images which were placed in correct order by PHP in divs. But apparently, when I run, I first see images loading from the page, and then JavaScript gallery run and hides images and show them in correct way.

I would like to run my script before browser would try to load images from divs on the page. I keep them in separate divs so that it’s SEO friendly and if JavaScript is turned off they will be shown all together on one page.

The body is something like:

<div>
    <img> ...  </img>
</div>
...       
<script type="text/javascript">
    jQuery(window).load(function() {
         ....myCode...
    });
</script>

Answer 1

You really want to start with initial default classes to avoid a ‘Flash Of Unstyled Content’ (sometimes referred to as FOUC).

However, you’ll be in better shape if you use the jQuery(document).ready(function(){}) call instead of $(window).load(fn). Document.ready is fired before the images load, while window.load doesn’t occur until those images have loaded.