王尘宇

近来有朋侪在群内里发问，我们的wordpress图片耽误加载功用是怎样完成的，既然人人以为预加载的功用异常好，那末小编就特地写一篇文章来引见wordpress的预加载是怎样完成的吧！

wordpress图片耽误加载的引见

预加载，望文生义，在超越网站可视范围内，图片不做加载，比及用户转动浏览器窗口，图片元素抵达可视范围内，入手下手加载图片，如许的体式格局可以打打的节约网站的资本和加速网站加载的速率，所以关于图片较多的wordpress网站来讲，图片预加载功用照样异常的好的。

图片预加载的中心：lazyload。

关于lazyload有网站编程履历的朋侪应当都很熟习，图片预加载的功用完成就是这个js文件来完成的。

运用lazyload有两种体式格局，一种是运用插件，一种是直接集成在主题中的非插件体式格局，下面我们起首引见一下非插件完成lazyload：

新版 jquery.lazyload.js 插件，请求必需给图片地点增加一个data-original属性，例以下：

1. <img class="lazy" data-original="img/example.jpg" width="640" height="480">

所以，我们要给wordpress主题里，有图片展现的处所加上data-original属性才行。

然后往header.php中加载文件：

1. <script src="<?php echo get_template_directory_uri(); ?>/js/jquery.min.js" type="text/javascript"></script>

2. <script src="<?php echo get_template_directory_uri(); ?>/js/jquery.lazyload.min.js" type="text/javascript"></script>

3. <script type="text/javascript">

4.     $(function() {

5.         $("img").lazyload({

6.             effect:"fadeIn"

7.           });

8.         });

9. </script>

加载了js这些后，网站里图片就可以完成耽误加载了，然则文章里的图片貌似还没有完成WordPress图片耽误加载，下面就是给wordpress里文章里插进去的图片加data-original属性了，将下面代码贴进wordpress主题文件夹的functions.php内

1. add_filter ('the_content', 'lazyload');

2. function lazyload($content) {

3.     $loadimg_url=get_bloginfo('template_directory').'/images/loading.gif';

4.     if(!is_feed()||!is_robots) {

5.         $content=preg_replace('/<img(.+)src=[\'"]([^\'"]+)[\'"](.*)>/i',"<img\$1data-original=\"\$2\" src=\"$loadimg_url\"\$3>\n<noscript>\$0</noscript>",$content);

6.     }

7.     return $content;

8. }

经由这两步骤，网站就完成了WordPress图片耽误加载了！

实在也有插件版的，请进：images lazyload

上面所说的都已打包文件可举行下载，请到下载区下载悉数相干文件吧！