远方的海
远方的海,WordPress,免费
2015 May 23 04 : 35

WordPress图片延迟加载非插件(lazyload)

您当前的位置: 首页 > WordPress > 正文
欢迎光临远方的海!您可能还对 WordPress建站免费资源最新IT动态 感兴趣,点击开启 悦读 模式。CTRL+D 快捷收藏本文,我们期待您再次光临!
[文章目录]
文章导读

WordPress图片延时加载可以提高页面加载速度,也比较美观。远方的海也使用了lazyload功能。这里给出一个非插件实现图片延时加载(lazyload)的方案。

下载JS文件

首先我们需要下载所需的js文件 点击下载。OK,现在把下载的两个js文件放到主题的根目录下。

我们所需的事情就是把这个js代码引入到Wordpress的头部~如果你的主题,已经加载了jquery,我们就不需要加载jQuery了喔~

在当前主题的header.php中,</header>之前加入以下代码:

<script src="<?php echo get_template_directory_uri(); ?>/jquery.min.js" type="text/javascript"></script>
/*如果主题已经有jquery,以上可以不要*/
<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>

修改functions.php

在主题的functions.php里面,增加下面的代码,代码的意义在于自动为图片添加data-original 属性,以便实现lazyload。

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;
}

添加一个加载的图片

右击下面的gif,另存一下,命名为loading.gif,也放在主题的根目录下。

Wordpress图片延迟加载非插件(lazyload)

 

OK,大功告成,刷新看看文章中的图片会延迟加载吗~~~

好文!分享给朋友,或者点个赞吧~

文章信息

分类:WordPress WP技巧

您可能也会喜欢

发表回复

Post Comment


  1. Sven水神 :

    test

    2015-5-23
  2. Sven水神 :

    今天在远方的海签到啦,又学了一些Wordpress建站知识!时间:下午10:45:57

    2015-5-23
    • Sven水神 :

      :!: :!:

      2015-5-23