SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict MikesBarto2002's Avatar
    Join Date
    May 2006
    Location
    New York City
    Posts
    317
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Slow loading images on home page

    I am working on a website where on the home page, there is a multi-layored slideshow that I created a jQuery script. It is basically four slideshows, three of which run side by side, and one of which I have layered on top of the other three that makes words pop up over the photos in the other three slideshows. See:

    The Play Group Theatre | The Play Group Theatre | Westchester’s Theater for Children and Teens

    When you go to the home page, I think that the images are really slowing down the load time, and I have tried adding a jQuery preloader:
    Code JavaScript:
    	$.fn.preload = function() {
        this.each(function(){
            $('<img/>')[0].src = this;
        });
    }
    // Usage:
    $(['/pics/header-background/theater-3.png','/pics/logo-5.png','/pics/imagebox-home/ilana-and-kids.jpg','/pics/imagebox-home/hair-do.jpg','/pics/imagebox-home/guys-and-dolls.jpg']).preload();

    ... in hopes that it would preload the header background image and the logo and the first photo in each of the three slideshows, but it is still running very slow.

    Any suggestions on how to speed up the load time on this? Should I be putting all of these photos into an image sprite? Any suggestions are welcome, please!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Hm, page load was pretty quick for me, even though I'm overseas. Still, on some connections I can see that it might get very slow.

    One thing I would do it put all those scripts at the bottom of the page (just before the </body> tag), so that they are the last thing to be loaded. The images seem small enough, though you could probably get the size of the header image down quite a bit. (300kb+ is a bit large.)
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Addict EarlyOut's Avatar
    Join Date
    Mar 2011
    Location
    Sector R
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Loading that page with Firebug's "net" section turned on is an eye-opener. I think your page-loading problems have more to do with a lousy server than with the content of the page. I'm seeing 25-second load times for PNG files that are only 19K, for example. There are some missing files, like jquery.easing-1.4.pack.js, that are slowing things down, but I'm seeing a lot of random "aborted" loads of various image files.

    On the other hand, I'm seeing things like dejavu-sans.ttf being loaded, at over 400K. Time to rethink just how badly you want to include fonts this way!

  4. #4
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,271
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Lawlz, DejaVu sans is for us Linux ppl. The rest of the world will have to deal with Verdana.


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
  •