(JS) Delayed image loading, nice to see meitu (from Yang zhongke)

One day, a friend of mine visited a XX image website ...... There are always some "friends" behind each other. Well, I admit that the "friend" is actually my own. What can you do with me?

This website was built with discuz X2 and started with discuzDelayed image loading. Currently, many image websites enable the image delayed loading mechanism to reduce the server load, that is, only images are loaded in the visible area, so that images that users do not see are not loaded, server load reduction is still very helpful. The general principle is that the image label does not specify the image path to the src attribute, and the src attribute specifies a very small blank image, the real image address is set to a custom attribute, such as file. The IMG tag is like this:

Because the image address is specified to a custom attribute, the IMG does not load the image. The ingress has a cache, so there is almost no pressure on the server.

Start a timer to check whether the image is in the visible area. If the image is in the visible area, set the value of the file attribute to the src attribute so that the image can be loaded. This is a great invention by a great programmer.

But it is not so good for users. If the network speed is slow, it will be painful to wait for it to load every time you scroll to an image! In addition, to view the XX group chart, we usually need to open several posts together so that those posts can be loaded slowly in the background. Let's look at one post after another, however, once there is a delay in loading, you can only open it one by one and then bear with it for loading and reading. It's not good. You can't hold it!

Programmers use the wisdom of programmers to solve the problem well. Do you have to write a Javascript script to set the file attribute of all images to the src attribute at one time? Write a Javascript script:

Javascript: var html = ''; For (VAR I = 0; I <document. images. length; I ++) {var IMG = document. images [I]; If (IMG. file) {HTML + = '' ;}}; document. write (HTML + "<br/> OK ");

My code is more direct. I traverse images with file attributes on the webpage, construct an HTML containing all the images, and output them to the browser. Haha, there are only images on the page!

Paste the above Code into the address bar and press Enter. The entire webpage has only images, no advertisement, no text, and only images. Don't be so cool!

The following figure shows the original webpage with delayed loading. (For Harmony, I spent half a day selecting a very small-sized image. At the same time, for harmony, I used mosaic as the URL and website name, understanding ):

 

 

Page after script execution:

 

To make it easier to add the above Code to favorites, open each image post and click the item in the favorites folder for further convenience!

If you want to use it more conveniently, you can write a BHO. The above code will be automatically executed every time the webpage is loaded. I will not write it if I am too lazy, the train of thought is left to everyone.