真正的LazyLoad——WordPress Lazyload 图片延迟加载

博客之前用的这个方法来延迟加载图片的，感觉上图片是延迟加载了。但这并不是真正的延迟，打开含有图片的页面时，还会加载所有的图片；另外jquery.lazyload.js最新代码已经改过了，再用以前的方法也失效了。

现在，大神们解决了此问题。原来 jQuery lazyload 插件说要把图片的地址写入 data-original 属性，loading 图片地址写入 URL 属性才能实现真正图片稍后载入（lazyload）。也就是说要修改图片的html结构。

修改前：

<img src=“img/example.jpg”>

修改后：

<img data-original=“img/example.jpg” src=“img/grey.gif”>

上述代码中，img/example.jpg 是真正要显示的图片地址。

jQuery lazyload的使用

完整jQuery lazyload 图片延迟加载方法设置如下：

第一步：加载jQuery相关文件。

你要加载jQuery和这个插件。你可以使用以下代码，加载这几个文件：

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

第二步：定义图片结构。

按照官方的建议，定义你的img结构：

<img src="img/grey.gif" data-original="img/example.jpg">

第三步：触发这个插件，生效。
激活以下，你就可以在目标中使用了。
$(“img.lazy”).lazyload();

使用jQuery lazyload的优点

优点已经说的太多了，这里就不赘述了。
具体效果演示，请点击这里。

使用jQuery lazyload的缺点

缺点也有，这里也不赘述了。

这里要提一个最大的缺点就是，此方法不方便操作。因为每次都按这个html结构来插入图片，那工作量陡增许多，而且有可能导致图片根本不显示。因此，young为wordpress写了一串如下代码，用正则表达式重组一下img标签，放在主题的functions.php文件中直接使用就可以了。这样还是可以按照以前的方式插入图片。

代码：

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;
}

上述代码中loading1.gif建议使用绝对路径，比如 http://www.mzihen.com/images/loading.gif

但是这个代码loading.gif地址不能通用，每个人还需要再修改成自己的地址，为此我专门请教了young，重新修改了一下代码。只需要将loading.gif放置到主题文件夹就可以了。

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;
}

再次感谢Binaryoung耐心帮助。

也鸣谢@Sam touhenda.com 同学的鼎力测试。

至此，WordPress中的图片真正的LazyLoad延迟加载了。

参考：
让wordpress真正支持jQuery插件lazyload
WordPress 技巧：让 WordPress 真正支持 jQuery Lazyload
缓冲加载图片的 jQuery 插件 lazyload.js 使用方法详解

转载：http://www.mzihen.com/real-lazyload/

真正的LazyLoad——WordPress Lazyload 图片延迟加载

jQuery lazyload的使用

使用jQuery lazyload的优点

使用jQuery lazyload的缺点

相关文章

栏目导航

最新文章

点击排行

推荐文章

打赏