The benefit of delaying the loading of WordPress images and avatars is that it can improve the loading speed of some pages. The detailed instructions for hosting static resources on Qiniu Cloud Storage and using Qiniu to cache Gravatar avatars to speed up the website can be found in these two articles: WP Super Cache Configuration with Qiniu CDN Acceleration and Using Qiniu Cloud Storage to Accelerate Gravatar Avatars.

About delaying the loading of WordPress images: If your article contains many or large images, delaying the loading of images can greatly improve the visitor's experience by first loading the page and then delaying the loading of images.

About delaying the loading of avatars: Qiniu itself has multiple CDN acceleration nodes, so the speed is very fast. However, caching Gravatar avatars to Qiniu may take some time. If your page contains avatars that have never been cached before, it may still be a bit slow. This article can solve the above two problems very well.

一、Add the jquery.lazyload.js plugin

First, download the jquery.lazyload.js plugin from here, and extract all the files from the compressed package to the theme's root directory. Then add the following code to the footer.php file in the theme directory to import it:

<script src="<?php echo get_template_directory_uri(); ?>/jquery.lazyload.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function() {
        $("img").lazyload({
            effect:"fadeIn"
          });
        });
</script>

二、Image lazy loading

According to the official website, you need to add a data-original attribute to the image. However, it is cumbersome to add it manually. Just add the following code to the functions.php file in the theme directory, and it will automatically add the data-original attribute to each image, achieving the purpose of lazy loading images:

//Lazy loading images
add_filter ('the_content', 'lazyload');
function lazyload($content) {
    $loadimg_url=get_bloginfo('template_directory').'/loading.gif';
    if(!is_feed()||!is_robots) {
        $content=preg_replace('/<img(.+)src=[\'"]([^\'"]+)[\'"](.*)>/i',"<img\$1data-original=\"\$2\" src=\"$loadimg_url\"\$3>\n<noscript>\$0</noscript>",$content);
    }
    return $content;
}
//Lazy loading images END

三、Lazy loading Gravatar avatars

WordPress uses Gravatar avatars by default, which can slow down the loading speed of the entire page. In the functions.php file (it may be in this file, depending on your theme), find code one and replace it with code two:

//This is code one, replace it with code two
<?php echo get_avatar( $comment, '32' ); ?>

//This is code two, replace code one with this code
add_filter ('the_content', 'lazyload');
function lazyload($content) {
    $loadimg_url=get_bloginfo('template_directory').'/load_min.gif';
    if(!is_feed()||!is_robots) {
        $content=preg_replace('/<img(.+)src=[\'"]([^\'"]+)[\'"](.*)>/i',"<img\$1data-original=\"\$2\" src=\"$loadimg_url\"\$3>\n<noscript>\$0</noscript>",$content);
    }
    return $content;
}

By following the above three steps, you can achieve the purpose of delaying the loading of WordPress images and avatars. The benefit is that only the images that are scrolled to will be loaded, which can improve the loading speed of pages with multiple images and reduce server load. The drawback is that it may affect the indexing of images by search engines, and some browsers may display blank pages when opening the page. However, currently, most themes already have this function enabled by default.