Loading all content (images) at once to increase site performance

问题

I recently did some website analysis On My Site to find that 90% of my site's loading time is coming from the 100's of images I have on the site. I have already cropped and compressed all images so that they are around 120kb in size (each).

Is there a way using jQuery perhaps that I could cache each image as the site loads so that each page doesn't take 10 - 12 seconds to load? If not, does anyone reading this have any better ideas? As of now, when each page loads it first loads the thumbnail images you see on the right hand side, and it will then load the larger images in the center of the screen.

I appreciate any help!

Evan

回答1:

Is there a way using jQuery perhaps that I could cache each image as the site loads so that each page doesn't take 10 - 12 seconds to load?

Caching is controlled with HTTP headers (which you should certainly be setting) but regardless of caching the initial load time will be way too high if you are loading hundreds of images at 120KB each.

Preloading can be accomplished with a little JavaScript (jQuery or not) but you probably shouldn't be preloading hundreds of images (I would be unhappy if a site silently ate up all my bandwidth in the background).

I suggest either loading the full-size images on demand (e.g. user clicks on a thumbnail) and/or lazy loading images (e.g. only loading them when they are scrolled into view).

Given the layout of your site, I would:

load the first visible image
preload the images for each visible thumbnail
preload a few more images whenever the user hits the "down" arrow.

Couple misc. notes:

http://gtmetrix.com/ is a great site for performance analysis.
Your layout is a little confusing on really wide monitors. On my 2500x1600 display, the arrows which control the thumbnails are several hundred pixels away which makes them hard to notice.

回答2:

Thought I'd throw this in as an answer because you liked my lazy load comment.

Try using Lazy Load Plugin for jQuery.

回答3:

This is reminiscent of the 90s and "hover" images...

You can use Image in JavaScript and pre-load them in to the browser cache, if that's what you're after:

var i = new Image();
i.src = "/path.to/image.jpg";

Or, for a collection:

var images = Array();
images[0] = '...1.jpg';
images[1] = '...2.jpg';
images[2] = '...3.jpg';

var img = new Image();
for (var i = 0; i < images.length; i++){
  img.src = images[i];
}

来源：https://stackoverflow.com/questions/10273375/loading-all-content-images-at-once-to-increase-site-performance

标签

jquery

image

web

load