WordPress 中部署真正的懒加载(Lazy Load)

WordPress 中部署真正的懒加载(Lazy Load)

不少WordPress 主题(包括DeveWork.com目前的主题)都有部署jquery 插件“懒加载”(Lazy Load),但其实很多都不能产生真正的懒加载(包括本站主题),充其量只是有个“淡入淡出”的特效——中看不中用,伪懒加载。本文主要教你如何修改代码实现主题上真正的懒加载。

注:最近在折腾 Jeff的阳台 新的主题,已经在上面部署真正的Lazy Load,本站主题的“伪懒加载”暂时搁着先;如果要查看效果,过几天前往Jeff的阳台看看吧~

懒加载(Lazy Load)的一些入门导航

关于懒加载(Lazy Load)插件的介绍,本文不再累赘。可以参考mg12 的《Lazy Load, 延迟加载图片的 jQuery 插件》,该文章已经非常较详细了。一些难理解的知识点可以参考该文

WordPress 中部署真正的懒加载(Lazy Load)

根据资料,可知要实现懒加载,图片img 标签必须如下面那样写:

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

即将占位图片grey.gif 写在地址上(src),而真正的地址则用 data-original来引用。当Lazy Load 运行时候,便会将src 修改为data-original 的图片地址,以此达到懒加载的目的。

但如果是在WordPress 中,文章的图片要按照这个实现,必须手动修改html 代码;如果图片多,那可真是费时费力;如果图片少,那也根本没有用懒加载的需要。因此,文章中的图片(编辑器写成的文章中的图片),除非特殊情况,否则没必要去弄这个懒加载

那么,在WordPress 中,懒加载(Lazy Load)可以运用在哪里了?

图片缩略图,还有头像图片。

缩略图的懒加载

相信不少博客主题的首页文章排版都是 缩略图+文章摘要 的格式,其中的缩略图不少还是用timthumb 截图的。那么这种排版格式就给懒加载提供了便利,我们只需要小小改动一下代码。

对于缩略图,找到代码可能如下:

<img src="<?php bloginfo('template_url'); ?>/timthumb.php?src=<?php echo post_thumbnail_src(); ?>&h=150&w=200&zc=1"  alt="<?php the_title(); ?>"/>

那么修改为如下即可:

<img class="lazy" src="/image-pending.gif" data-original="<?php bloginfo('template_url'); ?>/timthumb.php?src=<?php echo post_thumbnail_src(); ?>&h=150&w=200&zc=1"  alt="<?php the_title(); ?>"/>

头像图片的懒加载

正常的话,头像的加载在WordPress 中是用诸如<?php echo get_avatar($user_email, 40); >的函数,在前台生成的html 代码其实也是img 标签,该函数其实与下面的代码差不多:

<img width="40" height="40" class="comments-widget-avatar alignleft" src="http://www.gravatar.com/avatar/'.md5(strtolower(get_comment_author_email())).'?s=40&r=g 
">

要部署懒加载,先将<?php echo get_avatar($user_email, 40); >函数改为如上面的代码,然后再改为如下:

<img width="40" height="40" class="lazy comments-widget-avatar alignleft" src="/image-pending.gif" data-original ="http://www.gravatar.com/avatar/'.md5(strtolower(get_comment_author_email())).'?s=40&r=g 
">

完成后用开发者工具查看是否是真的懒加载??Of course!

评分:
4.57 avg. rating (86% score) - 7 votes
云左主机 广告
2 条 评论
  1. 看来我要修改的地方好多啊!

    回复
  2. CYs

    看了个大概,明儿来具体实施下

    回复
发表评论