How could I get different sections/boxes/images of my site to load at the *same* time?
I have a site that is divided into 3 key sections, Box A, B and C.开发者_开发百科
Box A contains a large image. Box B contains 6 thumbnails of smaller images. Box C contains a medium-sized image.
If the user clicks on the image in Box A, another image is loaded into Box A, while simultaneously, Box B is reloaded with 6 new random thumbnails, and Box C now contains a smaller version of the previous image in Box A.
Currently, images in these boxes load at different times/speeds, making the UX look awkward (that is, Box C might load before B, and B before A). How could I ensure that all the images load at exactly the same time (essentially, ensure that all images load at the same time that the last image is loaded)?
You can use JavaScript preloading to cache every image when the document is loaded. As long as nobody clicks on your images too quickly, you'll have the desired results.
Another option is to combine all the images into a single large graphic and use CSS to show only the part you want. However, this is really only practical when several small images are involved.
精彩评论