非插件实现WordPress图片延迟加载效果 – lazyload

资源外星人导读：本站为大家带来非插件实现WordPress图片延迟加载效果 – lazyload文章，更多建站技术，请继续关注资源外星人！

lazyload 是一个 jQuery 插件，它可以延迟加载长页面中的图片。在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置。在包含很多大图片的长页面中，延迟加载图片可以加快页面加载速度，在某些情况下还可以帮助降低服务器负担。下面我们介绍一下如何使用此款 jQuery 插件在WordPress建站中实现图片延迟加载的效果。

1. 下载 lazyload 源代码, 将下载的压缩包解压，复制 jquery.min.js 和 jquery.lazyload.min.js, 放到自己的主题目录。

点击此处下载 lazyload 压缩包

2. 切换到主题目录，打开header.php，引用 jquery.min.js和jquery.lazyload.min.js，详细的使用代码如下：

header.php

<script src="<?php echo get_template_directory_uri(); ?>/jquery.min.js" type="text/javascript"></script>
<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>

3. 还是在主题目录里，打开 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;
}

4. 在主题的根目录里放入一个加载的图片（GIF格式的），类似于下面的这张图片。

非插件实现WordPress图片延迟加载效果 – lazyload