WordPress图片延迟加载的实现【代码篇】

最近有朋友在群里面提问,我们的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图片延迟加载了!

上面所说的都已打包文件可进行下载,请到下载区下载全部相关文件吧!

温馨提示:本文最后更新于2017年9月28日,已超过 2 年没有更新,如果文章内容或图片资源失效,请留言反馈,#beetheme资源网#会及时处理,谢谢!

最近有朋友在群里面提问,我们的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图片延迟加载了!

上面所说的都已打包文件可进行下载,请到下载区下载全部相关文件吧!

精彩推荐

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

1. 本站所有资源来源于用户上传和网络,仅作为演示数据,如有侵权请邮件联系站长!
2. 本站承接各类网站建设,仿站,多平台小程序搭建制作!
3. 本站联系QQ:897918909
beetheme资源网 » WordPress图片延迟加载的实现【代码篇】

发表评论

售后服务范围1、服务器配置及主机购买推荐
2、模板使用范围内问题免费咨询
3、单价超过100元的模板免费一次安装,需提供服务器信息。
付费增值服务1、提供WordPress主题、插件汉化、优化等服务请详询在线客服
2、承接 WordPress、DedeCMS、ThinkPHP 等系统建站、仿站、开发、定制等服务
3、服务器环境配置(一般 ¥50-300)
4、网站中毒处理(需额外付费,500元/次/质保三个月)
售后服务时间周一至周五(法定节假日除外) 9:00-23:00
免责声明本站所提供的模板(主题/插件)等资源仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,有部分资源为网上收集或仿制而来,若模板侵犯了您的合法权益,请来信通知我们(Email: admin@vip.beetheme.cn),我们会及时删除,给您带来的不便,我们深表歉意!

Hi, 如果你对这款模板有疑问,可以跟我们联系哦!

联系我们

提供最优质的资源集合

立即查看 了解详情

扫码了解我们!