Couple of glitches with a jquery gallery

[samslystone]

Hi All

I have a little problem with the following site:

http://www.catherinehyland.co.uk/

Everything flows pretty well on my computer, but my client has complained that on other computers with slower connections/speeds etc there appear to be a couple of problems. The first is that the image that first loads on the index page does not load fully before it fades again. Secondly, the images in the gallery don't always fully load, revealing the images beneath. I have attached an image to demonstrate what she means.

I am at a loss as to why this is happening. Can anyone see a problem with my script?

Many thanks

S

[Beverleyh]

Hello,

I think a lot of the problem could be solved by optimising your images - they currently weigh in at a staggering 8.2MB!!!! With the scripts on top your page totals 8.6MB! That is HUGE. On a slower internet connection, each image isnt having time to load fully (if at all) before the gallery script moves on to displaying the next one, whether it's already downloaded or not. On a slow connection, the browser is playing "catch-up" - at least for the first rotation anyway.

The current web page size average is about 1.3MB http://www.infodocket.com/2013/03/06...-in-last-year/ , although I personally think that 1.3MB is still too large. I dont think the average web page really needs to top 1MB, and with optimisation, most should come it under 750KB.

Anyway - back to your case.

First, I'm going to refer you to my post here; http://www.dynamicdrive.com/forums/s...076#post292076 .That will give a general explanation of image optimisation and provide some useful links.

If you optimise your images to about 70% quality, the size of your web page would be reduced to somewhere in the region of 2MB, which is going to be much more comfortable on slower internet connections.

There are other things you can do to give the appearance of a faster page-load, such as moving all of your javascript to the bottom of the page (right above the </body> tag). BTW - you have the jQuery library linked twice - it only needs to be included once - so remove this line;

<script src="http://code.jquery.com/jquery/1.4/jquery.min.js" type="text/javascript"></script>

Another thing you can do it to move all of your CSS to an external stylesheet http://www.tizag.com/cssT/external.php .That wont make much of a difference the first time around, but it will do on subsequent loads because browsers cache external css, meaning thats it will already be loaded into the browser and won't need to be downloaded again while a visitor moves around the rest of the site. With the CSS in the head, as it currently is, a browser needs to download the extra code on every load before it will be applied to the page.

Of course, one of the easiest ways to reduce page load (even after image optimisation) is to reduce the number of images, or their dimensions. 14 large pictures seems a bit heavy for a home page - maybe reduce that to about 5 and move the rest into a gallery? At least when people click on a "gallery" link, they are somewhat prepared for a heavier loads of images - the hint is in the name

[Beverleyh]

Correction! You're linking to 3 jQuery libraries, so remove both lines in red;

 <script src="http://code.jquery.com/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="js/jquery-1.8.2.js"></script>

[jscheuer1]

Correction! You're linking to 3 jQuery libraries, so remove both lines in red;

 <script src="http://code.jquery.com/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="js/jquery-1.8.2.js"></script>

Sorry to butt in here but - the jQuery code on the page uses the .on() method which was new with jQuery 1.8, so the 1.8.2 version one should remain, the others should go. However, the page should load faster if a hosted version is used, so I would recommend replacing all of the above with:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

[Beverleyh]

Thanks for catching that John

[samslystone]

Thank you Beverley, it worked like a charm! And John, thank you for your contribution too!
X

[Beverleyh]

yes - that's much faster/smaller. Glad I could help.