简介 通常来说，一个正常web页面是由图片和文字以及各种CSS,JS构成，而这其中，拖慢网速的罪魁祸首就是图片。懒加载即将页面中的图片分布加载，边浏览边加载，从而减轻服务器压力以及减轻流量的浪费。 LazyLoad lazyload.js简介 Lazy Load是一个用js编写的jQuery插件，用来实现图片的延迟加载。只有在浏览器可视区域的图片才会被加载，没有滚动到的区域img标签上会有一个占位图片，而真实图片不会被载入。当页面比较长，图片比较多的时候，延迟加载图片可以加快页面加载速度，在某些情况下降低服务器负担。 原理分析 [crayon-662bbde67b3c9444089656/] 将图片真实地址存放于data-original（这个可自定义），src属性用一个小的加载中动图占位,在用户浏览到该图片时,再将真实图片地址取出,实现"边浏览边加载",从而减轻服务器压力以及减轻流量的浪费。 优势 战前准备 效果预览   准备工作 WordPress博客 Lazyload.js（本文提供下载） loading动图（文件已打包，也可以百度找资源） 一个聪明的大脑 文件下载 工作大纲 引入jquery.min.js和LazyLoad.js 图片链接转换 [crayon-662bbde67b3d4190772841/] 需要懒加载的地方自行修改 WordPress站点部署LazyLoad header引入JS 在主题文件夹header.php文件夹的适当位置加入以下代码 [crayon-662bbde67b3d6772990028/] 为图片自动添加 data-original 属性 在主题文件夹function.php文件夹加入以下函数 [crayon-662bbde67b3d7079306297/] 在主题文件夹的/images/文件夹下添加loading图片（以下是本站的loading图片，可以自行百度） 此时访问博客文章，即可实现懒加载的效果。 进阶篇——缩略图的懒加载 相信不少博客主题的首页文章排版都是 缩略图+文章摘要 的格式，其中的缩略图不少还是用timthumb 截图的。那么这种排版格式就给懒加载提供了便利，我们只需要小小改动一下代码。 对于缩略图，找到代码可能如下： [crayon-662bbde67b3d8677534634/]   那么修改为如下即可： [crayon-662bbde67b3d9955342591/]   进阶篇——头像图片的懒加载 正常的话，头像的加载在WordPress 中是用诸如<?php echo get_avatar($user_email, 40); >的函数，在前台生成的html 代码其实也是img 标签，该函数其实与下面的代码差不多： [crayon-662bbde67b3df389167359/]   要部署懒加载，先将<?php echo get_avatar($user_email, 40); >函数改为如上面的代码，然后再改为如下： [crayon-662bbde67b3e0169379072/]   更多玩法可以在文章下留言！