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!
- php中使用time获取到当前小时数不对
- Spring Boot开启的2种方式
- mysql中创建表实例全析及查询基本操作
- Spring Boot - Profile不同环境配置
- $.each()与$(selector).each()区别详解
- javascript typeof
- php中json_encode
- Java高级进阶:自定义ClassLoader
- 字符串拼接+和concat的区别
- Spring Boot Runner启动器
- Spring Boot自动配置原理、实战
- Spring Aware容器感知技术
- 深入探究frame和bounds的区别以及setbounds使用
- 如何生成二维码过程详解
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法