首页 SEO建站正文

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

WordPress图片耽误加载的完成【代码篇】 SEO建站

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

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

版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。

本文链接:https://seoxiu.com/post/42448.html

发表评论

评论列表(28人评论 , 365人围观)
  • 2020-12-18 15:30:17

    做人要安安稳稳本本分分,因为,你也根本搞不出什么幺蛾子。

  • 2021-01-29 14:06:49

    我这人吧,永远不要挑战我的底线,否则我又得修改底线。

  • 2020-12-07 03:20:15

    其实人生,在某个节点后就结束了,大家只是在等彩蛋。

  • 2020-11-25 01:55:06

    成功是可以复制的,而对于你,此处禁止粘贴。

  • 2020-11-28 20:44:30

    别总自称单身狗了,按年龄你是单身鳖,按智商你是单身傻狍子。

  • 2020-11-30 18:07:45

    没有钱的时候,听到别人说恭祝长命百岁,都觉得是一种诅咒。

SEO_SEO网站优化-西安SEO秀

https://seoxiu.com/

统计代码 | 京ICP备100000000

Powered By Z-BlogPHP 某某网络科技有限公司

使用手机软件扫描微信二维码

关注我们可获取更多热点资讯

Honor accompaniments. theme qk_xmh