正在载入...

Lazy Load 通俗说法是先加载网页,再加载图片,专业一点的说法是一个用 JavaScript 编写的 jQuery 插件,它可以延迟加载长页面中的图片,在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置。

在包含很多大图片长页面中延迟加载图片可以加快页面加载速度,浏览器将会在加载可见图片之后即进入就绪状态。 在某些情况下还可以帮助降低服务器负担。

新版jQuery Lazyload要求图片的html代码是下面这种结构:

<img src="img/grey.gif" data-original="img/example.jpg"  width="640" heigh="480">

也就是说,真正的图片地址是 data-original。但是wordpress默认的 img 结构是 src 是真实的图片地址。

现在要实现的是,不改变你写文章的习惯,图片该怎么添加就怎么添加,然后使用filter Hook批量替换后,在前台输出。也就是输出工作由程序自己去完成。

具体代码如下:

add_filter ('the_content', 'lazyload');
function lazyload($content) {
if(!is_feed()||!is_robots) {
$content=preg_replace('/<img(.+)src=[\'"]([^\'"]+)[\'"](.*)>/i',"<img\$1data-original=\"\$2\" src=\"loading1.gif\"\$3>\n<noscript>\$0</noscript>",$content);
}
return $content;
}

将以上代码添加到 wordpress 主题 的 functions.php 文件中。

文章来源:http://blog.wpjam.com/m/jquery-lazyload-4-wp/

本文链接:

关键词:data-original, jQuery, Lazyload, WordPress, 互联网, 代码,

(全文完        )

Comments

1 条评论(网友评论:1 条,博主回复:0 条)快速评论

  1. 不错,看看。

你需要 登录 才可以回复.