How does the website solve the problem that the picture is too large to load slowly?

A:

1, less "care" user experience of the easy way:

The images are saved incrementally, and the load becomes clearer instead of loading from top to bottom, then placing them in the CDN, setting up the cache, and so on.

2, compare the "care" user experience of high-end solutions:

Determine the user's device (mainly used in mobile), network, etc., loading different quality pictures (such as high-end iPhone WiFi case, you can load double high-definition graphics, etc., under the cellular network, loading a single-fold or lossy compression).

Or the first load of low-quality pictures, so that viewers can see, and then in the background load more HD, and so loaded, the viewer is still watching, insert replacement. or load the low-quality small picture list first, then let the user click, trigger a similar fancybox effect, pop-up window appears large picture. Or take advantage of resource preloading (three HTML5 Uncommon features introduction) when the user is not open, start loading. There are a lot of ideas, the back thought to add.

B:

Compress, preload, cache, picture bed.

C:

1. Using the cache

2. Using CDN Acceleration
3. Use the JQ delay to load the picture and use that to load which.
4. Increase the server broadband

5. Check the server hard disk read speed.

Ding:

To compress as much as possible, look at the degree of user tolerance. JPG can be compressed in many ways, PNG recommends using the tool (but the body picture, obviously to choose JPG format).

Recommend a compressed image of the artifact:

https://tinypng.com/

However, the disadvantage is that you cannot set the compression scale. Can only be compressed directly to a minimum. As a large banner map, sometimes the clarity is not enough standards.

E:

Directly at the beginning of the compressed volume of small drawings, and so after loading, and then use HD uncensored image to replace

HD Uncensored Pictures casually named, but the compressed name is required, that is, the original name must be preceded by the same easy-to-distinguish identification. Like what

HD Figure 1 named Wozuishuai.jpg so the corresponding compression diagram is called wozuishuai_min.jpg (_min this with you name, but to be consistent, not a call _min, the next becomes _small)

Then, the HD map is not used on the page, with a compressed map.

 In this way, you can open the page much faster, but the picture will be distorted, although sometimes not affect the use, but will affect the user's experience, and the boss of the table scold you what to eat?

do not be afraid, you can use the following code to solve this problem, this is based on JQ, the first to introduce JQ; In fact, no 1s, these graphs can basically be used, can see, but we are Mr Dongguo, impostors, but at least can know what the picture said. However, if only the high-definition images are loaded, then the user is bound to wait several s or even more than 10 s. In this way, the user is very easy to abandon this site.

How does the website solve the problem that the picture is too large to load slowly?