Real implementation of WordPress lazyload picture Delay Loading instance

Lazyload Picture Delay Loading error
Code Installation
Jquery.lazyload.js is a jquery plug-in, so you must first load jquery, and now the skin will use jquery. No students can insert the following code between:

The code is as follows	Copy Code
<script type= "Text/javascript" src= "Http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" ></ Script>

Then insert this code:

The code is as follows	Copy Code
<script type= "Text/javascript" src= "<?php bloginfo" (' template_directory ');? >/js/jquery.lazyload.js "></script> <script type= "Text/javascript" > Delay Image JQuery (document). Ready ( Function ($) { $ ("img"). Lazyload ({ Placeholder: "<?php bloginfo" (' Template_url ');? >/images/loading.gif ", Effect: "FadeIn" }); }); </script>

Save the changes.

Where Jquery.lazyload.js and loading.gif are placed in the use of the skin directory, the path is generally/wp-content/themes/and so on the skin/The above code is completely wrong, this picture really has been loaded, Just didn't show up. Below look at a real implementation of the picture delay loading code.

Now, the great gods have solved the problem. The original JQuery Lazyload plugin said to write the image address to the data-original attribute, loading the image address to the URL property to implement the real picture later load (lazyload). This means that you want to modify the HTML structure of the picture.

Before modification:

The code is as follows	Copy Code
After modification:

GIF ">

In the above code, img/example.jpg is the actual picture address to display.

The use of JQuery lazyload

The full jquery lazyload picture Delay loading method is set as follows:

First step: Load jquery related files.

You want to load jquery and this plugin. You can use the following code to load these files:

The code is as follows	Copy Code
<script src= "Jquery.js" type= "Text/javascript" ></script> <script src= "Jquery.lazyload.js" type= "Text/javascript" ></script>

Step two: Define the picture structure.

Follow the official advice to define your IMG structure:

The code is as follows	Copy Code

Step three: Trigger this plugin to take effect.
If you activate the following, you can use it in the target.

The code is as follows	Copy Code
$ ("Img.lazy"). Lazyload ();

Advantages of using jquery lazyload

The advantages have been said too much, here is not to repeat.

Disadvantages of using jquery lazyload

Shortcomings also have, here also do not repeat.

One of the biggest drawbacks here is that this method is not convenient to operate. Because every time you insert a picture by this HTML structure, the workload is a lot more steep, and it can cause the picture not to appear at all. Therefore, young for WordPress wrote a string of the following code, with regular expression to reorganize the IMG tags, put in the theme of the functions.php file directly to use. This still allows you to insert the picture in the way you used to.

Code:

The code is as follows	Copy 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 suggests using absolute paths in the above code, such as Http://www.mzihen.com/images/loading.gif

But this code loading.gif address can not be universal, everyone needs to be modified to their own address, for this I specifically consulted young, revised the code again. Just place the loading.gif in the theme folder.

The code is as follows	Copy Code
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; }

Thanks again for Binaryoung patient help.

Also thanks to @sam touhenda.com classmate's test.

At this point, the picture in WordPress real lazyload delay loading.