If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Couple of glitches with a jquery gallery

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?

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.

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;

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

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: