真正实现WordPress Lazyload 图片延迟加载实例

时间：2013-10-31 编辑：简简单单来源：一聚教程网

Lazyload 图片延迟加载误区
代码安装
jquery.lazyload.js 是 jQuery 的插件，所以必须先载入jQuery，现在一般皮肤都会用到jQuery。没有的同学可以在之间插入如下代码:

代码如下	复制代码

然后在插入这段代码:

代码如下	复制代码

保存修改。

其中jquery.lazyload.js和loading.gif是放在对用的皮肤目录下的，路径一般是 /wp-content/themes/某某皮肤/ 上面的代码其实是完全错误的，这个图片真的己经给加载了，只是没有显示出来。下面看一个真正实现图片延迟加载代码。

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

修改前：

代码如下

复制代码

修改后：

gif”>

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

jQuery lazyload的使用

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

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

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

代码如下	复制代码

第二步：定义图片结构。

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

代码如下	复制代码

第三步：触发这个插件，生效。
激活以下，你就可以在目标中使用了。

代码如下	复制代码
$("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('//i',"n",$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('//i',"n",$content); } return $content; }

再次感谢Binaryoung耐心帮助。

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

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

上一个： ecshop购物车退出不清空几种方法
下一个： ecshop 获取所在商品的顶级分类ID及NAME两种方法

推荐专题

最新下载

热门教程

真正实现WordPress Lazyload 图片延迟加载实例

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程