wordpress文章内容批量转换data-original真正支持jQuery Lazyload

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批量替换后,在前台输出。也就是输出工作由程序自己去完成。

具体代码如下:
[ad]
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/

人吐槽 人点赞

猜你喜欢

发表评论

用户名: 密码:
验证码: 匿名发表

你可以使用这些语言

查看评论:wordpress文章内容批量转换data-original真正支持jQuery Lazyload