WordPress免插件实现图片延迟加载 - 利剑分享-科技生活-利剑分享-科技生活
利剑分享-科技生活-利剑分享-科技生活
利剑分享-科技生活

WordPress免插件实现图片延迟加载

WordPress免插件实现图片延迟加载

WordPress图片延迟加载可以通过插件实现,如bj lazyload就做的非常好,可设置排除延迟加载的图片,功能比较强大。但如果你仅仅是需要为主题加个延迟加载图片功能来加快页面载入速度,而没有更多的功能需求,就完全可以采用免插件实现lazyload延迟加载效果。本文就介绍如何用 jquery.lazyload.js延迟加载插件来实现WordPress免插件图片延迟加载功能。

具体实现方法如下:

1、在你的主题header.php中添加jquery.lazyload.js引用:
jquery.lazyload.js下载地址:http://pan.baidu.com/s/1c0lGqq8

/*
添加jquery.lazyload.js引用
代码来源: www.wpzxbj.com
*/


这段代码的前提是你的主题已引用了jquery.min.js,如果没有还需引用jquery.min.js,一般情况下主题都会引用的,所以无需再手工添加到header.php中了。

2、为图片自动添加data-original属性:
jquery.lazyload.js插件要求必须为每张图片添加data-original属性才能启用延迟加载功能,没有添加这个属性的图片就不会延迟加载。而我们不可能为每张图片手动添加这个属性,需要自动添加data-original属性才行。将以下代码插入function.php即可为图片自动添加该属性:

/*
自动添加图片data-original属性
代码来源: www.wpzxbj.com
*/
    add_filter ('the_content', 'lazyload');
    function lazyload($content) {
        $loadimg_url=get_bloginfo('template_directory').'/img/loading.gif'; //延迟加载占位图
        if(!is_feed()||!is_robots) {
            $content=preg_replace('//i',"n$0",$content);
        }
        return $content;
    }

代码中的loading.gif为延迟加载显示真实图片之前的占位图,具体路径及图片可自定义。

3、用户头像延迟加载:

文章图片延迟加载实现后,还有用户头像延迟加载没解决,需要对头像也实现延迟加载可以用以下代码在主题相应位置替换默认头像调用函数:


新的头像延迟加载代码:

/*
头像延迟加载
代码来源: www.wpzxbj.com
*/
<?php echo 'avatar'; ?>

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享