Lazyload.js

准备工作

  • WordPress博客
  • Lazyload.js(本文提供下载) loading动图(文件已打包,也可以百度找资源)
  • 一个聪明的大脑

文件下载

 云盘下载 备用下载

工作大纲

  1. 引入jquery.min.js和LazyLoad.js
  2. 图片链接转换
  3. 需要懒加载的地方自行修改

WordPress站点部署LazyLoad

header引入JS

在主题文件夹header.php文件夹的适当位置加入以下代码

PS:以上代码必须<head>···</head>内,jquery.lazyload.min.js引用必须在jquery.min.js之后。

threshold:200(距离未加载图片200px时开始加载)

为图片自动添加 data-original 属性

在主题文件夹function.php文件夹加入以下函数

在主题文件夹的/images/文件夹下添加loading图片(以下是本站的loading图片,可以自行百度)

 云盘下载

此时访问博客文章,即可实现懒加载的效果。

进阶篇——缩略图的懒加载

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

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

那么修改为如下即可:

 

进阶篇——头像图片的懒加载

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

 

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

0

Related Posts

Comments

发表评论

电子邮件地址不会被公开。 必填项已用*标注