Results 1 to 9 of 9

Thread: onfocus Loading Page jquery

  1. #1
    Join Date
    Jul 2009
    Location
    Binus University
    Posts
    472
    Thanks
    78
    Thanked 21 Times in 21 Posts

    Default onfocus Loading Page jquery

    Hi, i have problem with loading page in my website:
    this is mine:
    http://www.ninetynine.co.id/
    the biggest problem that i can't handle is the loading part. It takes really long to load everything.


    The other website that have the same concept like mine is this one:
    http://carrotcreative.com/#!/contact

    As you can see the loading part at above website, the content load only when the user navigate to the selected part.
    In my case i load everything in the first.

    So is there any idea, how to make function like that one??
    Thank you so much
    _____________________

    David Demetrius // davejob
    _____________________

  2. #2
    Join Date
    Oct 2009
    Posts
    845
    Thanks
    14
    Thanked 189 Times in 188 Posts

    Default

    Hi davelf, it's always interesting to see your projects, nice, but as you said, the load time is loooong. Come to think of the lazy load jquery plugin, maybe you could use something like that. Unfortunately it seems to need an update to work in the latest browsers, but if you google "lazy load" or "lazy loading" you may be able to find something useful.

  3. The Following User Says Thank You to azoomer For This Useful Post:

    davelf (11-05-2011)

  4. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    An adaptation of or code like lazy load might help. However, it should be noted that the major difference in load times between your project and the other site you linked to is not code. It's the aggregate byte load of the images. Your project simply has more image bytes to load.
    - John
    ________________________

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

  5. The Following User Says Thank You to jscheuer1 For This Useful Post:

    davelf (11-05-2011)

  6. #4
    Join Date
    Jul 2009
    Location
    Binus University
    Posts
    472
    Thanks
    78
    Thanked 21 Times in 21 Posts

    Default

    Quote Originally Posted by azoomer View Post
    Hi davelf, it's always interesting to see your projects, nice, but as you said, the load time is loooong. Come to think of the lazy load jquery plugin, maybe you could use something like that. Unfortunately it seems to need an update to work in the latest browsers, but if you google "lazy load" or "lazy loading" you may be able to find something useful.
    Thanks azoomer, i'll try that jquery.

    Quote Originally Posted by jscheuer1 View Post
    An adaptation of or code like lazy load might help. However, it should be noted that the major difference in load times between your project and the other site you linked to is not code. It's the aggregate byte load of the images. Your project simply has more image bytes to load.
    ya, that's the biggest problem John. Most of my content are images, even "the save for web" in low quality (photoshop) don't help the loading part.
    _____________________

    David Demetrius // davejob
    _____________________

  7. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I find that hard to believe. I mean it will still take some time because there are so many images. But reducing the overall number of bytes should speed things, perhaps considerably.
    - John
    ________________________

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

  8. #6
    Join Date
    Jul 2009
    Location
    Binus University
    Posts
    472
    Thanks
    78
    Thanked 21 Times in 21 Posts

    Default

    hmm, there's about 9 section there.
    on my images folder, it's about 9 Mb.
    And that's totally because of my crazy idea to make a single page, haha.
    I think, i need to reconsidered this. May be i'll try to seperate that 9 section into 3 section each page.
    _____________________

    David Demetrius // davejob
    _____________________

  9. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    My first computer I had a 20 MB hard drive. I eventually got a 40 and thought I was in heaven. You might laugh at that, I do. But it sort of illustrates the problem. Bandwidth isn't really much beyond that type of capability. I have a very high speed connection, not the best I suppose. But it's measured in mbps. That's megabits per second, not megabytes. 8 bits to a byte I think. When everything is working I get 100. That's 12.8 meg per second. But, as I'm sure you know, things are almost never perfect with stuff like that. Still, it doesn't take all that long for the site to load up on my machine, under the dreaded 8 seconds we often hear about (the time it takes the average person to give up and move on if a site hasn't loaded yet). But not much. Or maybe I'm spoiled. Either way, I feel bad for other people.

    The whole project is pretty cool. And for what it is you've done a great job of keeping the byte total low. But with large images and with sound files you can only do so much. Holding things back until they are needed is an approach. Rollover images would be the easiest to exclude because it doesn't take too much code to write a reusable routine for showing a small loading image while a rollover is being loaded for the first time. If you could work it out how not to load those large jpg files until the user scrolls them into view, that would help. But the routine for that could be a bit complicated. For sound files, even more so.
    - John
    ________________________

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

  10. The Following User Says Thank You to jscheuer1 For This Useful Post:

    davelf (11-06-2011)

  11. #8
    Join Date
    Jul 2009
    Location
    Binus University
    Posts
    472
    Thanks
    78
    Thanked 21 Times in 21 Posts

    Default

    wow, thanks for your analysis.
    The worst case scenario i've ever think with my problem here is, make this website as desktop application.
    I don't know may be user can play or see with that web while waiting for their food come, haha.

    Make the new one, minus the sound and refresh ever page. Plus the jquery lazy load, may be will rescue this project from total chaos.
    _____________________

    David Demetrius // davejob
    _____________________

  12. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I see you're using jQuery 1.4.2, it's up to at least 1.6.4. Any reason you're not using that? It has some added capabilities that might come in handy and is more stable for newer browser versions.

    With either version you should be able to use just background color for the rooms that aren't in the viewing area, launch a small preloaded loading image centered over the window once a room begins to come into view, loading that room's image as a new Image() that has an onload event that hides the loading image while making that room image the background image for that room element.

    The trick is detecting when a room is coming into view. Since each room has a gray to fuzzy edge, it need not be the moment it starts to come into view, rather when the viewable area of it does. This should be able to be detected during the dragging, but might be a little tricky to work out the details.
    Last edited by jscheuer1; 11-06-2011 at 04:20 PM.
    - John
    ________________________

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

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
  •