北极寒流 » 网络资源 » LazyLoad完美实现图片延迟加载方法2 - 2012.04.05

LazyLoad完美实现图片延迟加载方法2

上次给大家分享了一篇关于LazyLoad开启页面缓冲完美实现图片延迟加载的文章,在文章最后本人就曾经提到,如果采用了timthumb自动缩略图功能,那么开启页面缓冲后,就会出现缩略图功能出错。解决的办法要么重写匹配图片正则(只能等高手搞定了),要么就换缩略图插件(或者代码),现在我就再给大家分享一种采用非缩略图插件来实现的办法(也是网上搜来的)

如果你的网站需要缩略图功能,那么可以采用下面的代码

function post_thumbnail(){
	global $post;
	if( has_post_thumbnail() ){//Wordpress自带的 特色图片
		$timthumb_src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),'full');
		$post_timthumb = '<img data-original="'.$timthumb_src[0].'" src="'.get_bloginfo("template_url").'/images/grey.gif" alt="'.$post->post_title.'" class="thumb" />';
	} else {
		$post_timthumb = '';
		ob_start();
		ob_end_clean();
		$output = preg_match('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
		$cnt = count($matches);//采用用$cnt数量来判断, 文章是否有图片
		if($cnt>0){
			$first_img_src = $matches [1];
			$post_timthumb = '<img data-original="'.$first_img_src.'" src="'.get_bloginfo("template_url").'/images/grey.gif" alt="'.$post->post_title.'" class="thumb" />';
		} else {
			$post_timthumb = '<img data-original="'.get_bloginfo("template_url").'/images/default_thumb.jpg" src="'.get_bloginfo("template_url").'/images/grey.gif" alt="'.$post->post_title.'" class="thumb" />';
		}
	}
	echo $post_timthumb;
}

把上述代码放在functions.php 里,然后再用

<?php post_thumbnail() ?>

这样调用即可显示缩略图,同时也完成了缩略图LazyLoad的后台处理,如果你希望你文章中的图片也需要自动LazyLoad处理,那么你还得需要把下面的代码放进functions.php 里

/*LazyLoad后台处理*/

function LazyLoad_img($c) {

    $s = array('/src="(.+?.(jpg|bmp|png|jepg|gif))"/i' => 'data-original="$1" src="'.get_bloginfo("template_url").'/img/grey.gif"');

    foreach($s as $p => $r){

        $c = preg_replace($p,$r,$c);

    }

    return $c;

}

add_filter( 'the_content', 'LazyLoad_img' );

剩下的就是安装LazyLoad的事了。把下面的代码放在header.php中(第一句为加载JQ,如果你的主题已经加载JQ,就不用重复加载了,第二句为加载Lazy Load插件,请注意把它修正为你自己的文件路径):

<script src="jquery.js" type="text/javascript"></script>

<script src="jquery.lazyload.js" type="text/javascript"></script>

<script type="text/javascript" charset="utf-8">

$(function() {$("img").lazyload();});

</script>

经过如此设置,即可让LazyLoad完美实现实现图片延迟加载功能。

资料来源:http://mufeng.me/lazyload.html

05

LazyLoad完美实现图片延迟加载方法2

分享到:

最受欢迎的