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!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Google Dart

AngularDart4.0 高级-属性(Attribute)指令 顶

结构指令改变了视图的结构。 两个例子是NgFor和NgIf。 在“结构指令”页面中了解它们。

1061
来自专栏从零开始学自动化测试

Selenium+python自动化82-只截某个元素的图

前言 selenium截取全图小伙伴们都知道,曾经去面试的时候,面试官问:如何截图某个元素的图?不要全部的,只要某个元素。。。小编一下子傻眼了, 苦心人,天不负...

4864
来自专栏偏前端工程师的驿站

前端构建:Less入了个门

一、前言                                说到前端构建怎能缺少CSS预处理器呢!其实CSS的预处理器有很多啦,比较出名的有Scs...

1927
来自专栏余生开发

base64图片转码

方法一: new fileReader().readAsDataURL(file) 方法二: var imgCanvas=document.createE...

4693
来自专栏Nian糕的私人厨房

jQuery ele.find() is not a function 错误的解决办法

这又是在项目过程中所遇到的一个问题,ele.find() is not a function,其中 HTML 代码如下所示:

995
来自专栏张善友的专栏

数据源控件参数类Parameter

Parameter 类表示由 ASP.NET 数据源控件用来选择、筛选或者修改数据的参数化 SQL 查询、筛选表达式或业务对象方法调用中的参数。Paramet...

19810
来自专栏Alan's Lab

如何编写一个 jQuery 插件

https://github.com/zcfan/sket... 重写了本文的初步功能实现,支持一个页面多个画图板。但为简单起见,本文保持不变。

1324
来自专栏Google Dart

AngularDart4.0 指南- 用户输入 顶

用户的操作,如点击链接,按下按钮,输入文字引发DOM事件。 本页说明如何使用Angular事件绑定语法将这些事件绑定到组件事件处理程序。

2280
来自专栏程序员宝库

Chrome 调试技巧

想必大家都在用console.log在控制台输出点东西,其实console还有其它的方法:

3312
来自专栏木制robot技术杂谈

常用命令行快捷键

1535

扫码关注云+社区

领取腾讯云代金券