Pre-Loading Images

I have a script that runs to show four images.  Sometimes it works.  Sometimes it doesn't.
I have this in the CSS

#preload {
	display:
	none;
}

Select allOpen in new window

I load this...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Select allOpen in new window

Then I run this...

<script>
$(window).on('load', function(){
$('#options .option-set a:first').trigger('click');
});
</script>

Select allOpen in new window

The images are in this div

<div id="preload">
   <img src="_include/img/Albums/Bummer-Gun.jpg" alt="Bummer Gun">
   <img src="_include/img/Albums/Beyond-The-Basics.jpg" alt="Beyond The Basics">
   <img src="_include/img/Albums/Lay-Low.jpg" alt="Lay Low">
   <img src="_include/img/Albums/Chateu-Faux-Coupe.jpg" alt="Chateau Faux Coupe">
</div>
</body>
</html>

Select allOpen in new window

The site..
http://www.davidschure.com/Template/brushed/index.html

You might have to hit the refresh button to see the images.