Results 1 to 7 of 7

Thread: Couple of glitches with a jquery gallery

  1. #1
    Join Date
    Feb 2013
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Couple of glitches with a jquery gallery

    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

    SClick image for larger version. 

Name:	Screen shot 2013-03-14 at 21.27.54.jpg 
Views:	153 
Size:	19.1 KB 
ID:	4992

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,040
    Thanks
    16
    Thanked 318 Times in 316 Posts
    Blog Entries
    14

    Default

    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;
    Code:
    <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
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. #3
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,040
    Thanks
    16
    Thanked 318 Times in 316 Posts
    Blog Entries
    14

    Default

    Correction! You're linking to 3 jQuery libraries, so remove both lines in red;
    Code:
     <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>
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,167
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by Beverleyh View Post
    Correction! You're linking to 3 jQuery libraries, so remove both lines in red;
    Code:
     <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:

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,040
    Thanks
    16
    Thanked 318 Times in 316 Posts
    Blog Entries
    14

    Default

    Thanks for catching that John
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  6. #6
    Join Date
    Feb 2013
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  7. #7
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,040
    Thanks
    16
    Thanked 318 Times in 316 Posts
    Blog Entries
    14

    Default

    yes - that's much faster/smaller. Glad I could help.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

Similar Threads

  1. Explorer glitches
    By Hillemary in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 06-29-2012, 08:58 PM
  2. Rendering glitches in Mac FF 3.6
    By ozzie123 in forum CSS
    Replies: 4
    Last Post: 05-18-2010, 09:27 AM
  3. fadein slideshow 2.1 not working in explorer, glitches in firefox
    By fatpotanga in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 10-16-2009, 11:25 PM
  4. A couple of Questions
    By stan1 in forum Looking for such a script or service
    Replies: 0
    Last Post: 06-05-2007, 09:30 PM
  5. A couple of questions?
    By alexjewell in forum The lounge
    Replies: 3
    Last Post: 01-14-2007, 04:08 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •