Images Not Always Loading

I have a webpage that has images, but they don't always load.  Sometimes they do.  Sometimes they dont.  This is the link.
http://www.davidschure.com/Template/brushed/index.html
You might have to hit the refresh button to see them.  Here is the code that calls the images.

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

Not sure why this is happening.

Open in new window

DS928Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Alexandre SimõesManager / Technology SpecialistCommented:
I couldn't reproduce the problem with the images but you have some javascript errors.
It might be related...
0
DS928Author Commented:
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?
0
Alexandre SimõesManager / Technology SpecialistCommented:
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.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

DS928Author Commented:
Thank you.  I am not sure how to fix those two errors.  I think perhaps the images have to be loaded before the event.
0
DS928Author Commented:
I did this...
I put this in the css file
div#preload {
	display:
	none;
}

Open 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>

Open in new window

This seems to be working for now.
0
DS928Author Commented:
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
0
Alexandre SimõesManager / Technology SpecialistCommented:
Aparently it's still not solved:
http://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.
0
Alexandre SimõesManager / Technology SpecialistCommented:
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.
0
DS928Author Commented:
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
0
DS928Author Commented:
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>

Open 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-->

Open 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.
0
Alexandre SimõesManager / Technology SpecialistCommented:
In your case you have the jPreloader bundled inside the plugins.js file.
You have to take it out of there and put it in the head.
Again, I don't know if this is it, but at least in the plugin docs they are explicit about this.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
DS928Author Commented:
Mercy.  Where is it?
plugins.js
0
Alexandre SimõesManager / Technology SpecialistCommented:
It's at the beginning! Right the first one.
It has the comment  /* jPreloader */
From here to the next comment it's all jPreloader.
0
DS928Author Commented:
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.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.