Images Not Always Loading

I couldn't reproduce the problem with the images but you have some javascript errors.
It might be related...

Thank you.  It seems that the first time I open the page in a clean browser the images aren't there.  If I load the page again in a new tab the images appear.  Could this have something to do with pre-loading the images?

I really can't reproduce it, and when I try to use the dev tools I always get a couple of errors.
Does this happen only on a specific browser? I've tried IE11 and Chrome... all good.

From the code you posted above you're triggering a click event on window load.
Probably it's not related but you could simply:
- remove the window load event handler by executing this code at the end of the body
- call a function that would be the same called by the click event of the link

most of all, fix the 2 JavaScript errors you have. They might cause unexpected behaviors.

Thank you.  I am not sure how to fix those two errors.  I think perhaps the images have to be loaded before the event.

I did this...
I put this in the css file

div#preload {
	display:
	none;
}

Select allOpen in new window

and this at the bottom of the page

<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

This seems to be working for now.

I've requested that this question be closed as follows:

Accepted answer: 0 points for DS928's comment #a40855694

for the following reason:

I dug and found the problem

Aparently it's still not solved:
https://www.experts-exchange.com/questions/28693138/Pre-Loading-Images.html

Spreading the same question around will just split information.
Stick with one question and we'll find a way to help you.

I just inspected your code and saw that you're using Supersized and jPreloader plugins.
jPreloader is set to attach to the body and preload all the images which may conflict with the Supersized embeded preloading functionality.

Also, in the jPreloader documentation, they say to put the plugin script in the head and initialize it ant the end of the body.
I agree with your approach of putting everything at the end but I don't know what they are doing there that might actually require to be executed before the body is parsed (hide the body for instance).

And you still have a javascript error.

Thank you.  I am not sure which plug in script to put in the head?  And how would I initialize it.  I have attached the file for ease of use.
index.html
main.css
main.js

The javascript error occurs because I am using this:

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

Select allOpen in new window

When I use this.  It goes away.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <!-- jQuery Core-->

Select allOpen in new window

But when I use the second one the script to show the 4 images does not work, or not at all as opposed to sometimes.

Mercy.  Where is it?
plugins.js

It's at the beginning! Right the first one.
It has the comment  /* jPreloader */
From here to the next comment it's all jPreloader.

I moved the js file to the beginning.  I will play with this for awhile.  If problems arise I will just put the script there.  Thank you.