onfocus Loading Page jquery

[davelf]

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

[azoomer]

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.

[jscheuer1]

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.

[davelf]

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.

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.

[jscheuer1]

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.

[davelf]

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.

[jscheuer1]

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.

[davelf]

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.

[jscheuer1]

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.