We're a community of 1076K IT Pros here for help, advice, solutions, professional growth and fun. Join us!
1,075,721 Members — Technology Publication meets Social Media
Username:
Password:
Lost login information?
Start New Discussion Reply to this Discussion

jQuery loading images takes long.

Hi!
I have this problem on my website. When i move to the randomize section of my page it loads slow. It's ment to fetch alot of images, but it loads pretty slow, also the window freezes until the jQuery code in done running.

I don't know how to explain it better, but if you go to my site, you can see it yourself.
http://wallpapers.darkleaks.net/ (go to the Randomize section)

I want to do something like wallbase.cc have done on their site. Like a scroll down, the load new images etc.
But i do not how do deal with that, so help would be good.

Anyone?

3
Contributors
3
Replies
5 Days
Discussion Span
1 Year Ago
Last Updated
4
Views
kaizokupuffball
Light Poster
39 posts since Aug 2011
Reputation Points: 10
Solved Threads: 0
Skill Endorsements: 0

Here is how to detect that you scrolled to the bottom. Then you need to change your load to something that reads just a specific amount of images at a time. To do that you'll need to change your get.php?page=N to return a "page" at a time.

pritaeas
Posting Prodigy
Moderator
9,265 posts since Jul 2006
Reputation Points: 1,173
Solved Threads: 1,456
Skill Endorsements: 86

Thx!

kaizokupuffball
Light Poster
39 posts since Aug 2011
Reputation Points: 10
Solved Threads: 0
Skill Endorsements: 0

Hi Puffball

When I visited your site earlier in the week there were 230 thumbnails to download. That's rather a lot, especially for someone visiting your page for the first time, with an empty browser cache.

As has already been suggested, dividing the content up into pages and downloading it dynamically might help. This is what Wallbase appear to be doing. But I think there is more you need to consider.

Each of those thumbnails is generating an HTTP request, and I suspect it's these that are killing your site's performance. One difference I noticed between Wallbase's site and yours, is they display larger but fewer thumbnails per page. Although the screen area is identical, and so the amount of image data transmitted would be similar, they're actually having to processing fewer HTTP requests.

In addition to displaying few thumbnails per page, you could try merging thumbnails into a single image. You could then use an image map or some other method for capturing a user's click. It would be interesting to know how this performs, and fairly simple to test :-)

BTW, you have two external CSS files linked. Why not merge them into one? Also, there's a great chance a new visitor will have already cached a copy of jQuery from another source, i.e. http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js So, why force new visitors to download your duplicate copy?

One final thought on HTTP request optimization...

Each request for a thumbnail image on your domain is sending a full HTTP header. Put all of your static content on a separate domain or subdomain, and it will keep your headers lean by stripping cookie data.

LaxLoafer
Junior Poster
109 posts since Aug 2011
Reputation Points: 43
Solved Threads: 15
Skill Endorsements: 12

This article has been dead for over three months: Start a new discussion instead

Post: Markdown Syntax: Formatting Help
 
You
View similar articles that have also been tagged:
 
© 2013 DaniWeb® LLC
Page rendered in 0.5352 seconds using 2.78MB