WordPress图片延时加载可以提高页面加载速度，也比较美观。
这里给出一个非插件实现图片延时加载（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图片延迟加载非插件（lazyload）

标签：WordPress

你的评论