WordPress blog uses Lazyload image loading delay function

This method was used by the blog to delay image loading. It seems that the image loading is delayed. However, this is not a real Latency. When you open a page containing images, all the images will be loaded. In addition, jquery. lazyload. the latest js code has been modified, and the previous method also becomes invalid.

Now, the experts have solved this problem. The original jQuery lazyload plug-in said that the image address should be written to the data-original attribute, and the loading image address should be written to the URL attribute to load the real image later (lazyload ). That is to say, you need to modify the html structure of the image.

Before modification:

After modification:

In the above code, img/example.jpg is the image address to be displayed.

Use of jQuery lazyload

The complete jQuery lazyload image loading method is set as follows:

Step 1: load jQuery-related files.

You need to load jQuery and this plug-in. You can use the following code to load these files:

<Script src = "jquery. js" type = "text/javascript"> </script>
<Script src = "jquery. lazyload. js" type = "text/javascript"> </script>
Step 2: define the image structure.

Follow the official suggestions to define your img structure:

Step 3: trigger this plug-in to take effect.
Activate the following and you can use it in the target.
$ ("Img. lazy"). lazyload ();

Advantages of Using jQuery lazyload

There are too many advantages, so I won't go into details here.
Click here to demonstrate the specific effect.

Disadvantages of using jQuery lazyload

There are also some disadvantages. I will not go into details here.

The biggest disadvantage here is that this method is not convenient. Because every time you insert an image based on the html structure, the workload increases sharply, and the image may not be displayed at all. Therefore, young wrote the following code for wordpress, reorganized the img tag with a regular expression, and put it directly in the functions. Php file of the topic. In this way, you can still insert images in the previous way.

Code:

Add_filter ('The _ content', 'lazyload ');
Function lazyload ($ content ){
If (! Is_feed () |! Is_robots ){
$ Content = preg_replace ('//I ', " \ n <noscript> \ $0 </noscript> ", $ content );
 }
Return $ content;
}
Loading1.gif in the above code is recommended to use absolute path, such as http://www.111cn.net/images/loading.gif

However, this code loading.gif address cannot be used in a general sense. You need to modify it to your own address. For this reason, I have consulted young and modified the code again. You only need to place loading.gif in the topic folder.

Add_filter ('The _ content', 'lazyload ');
Function lazyload ($ content ){
$ Loadimg_url = get_bloginfo ('Template _ directory'). '/loading.gif ';
If (! Is_feed () |! Is_robots ){
$ Content = preg_replace ('//I ', " \ n <noscript> \ $0 </noscript> ", $ content );
}
Return $ content;
}