lazyload 是一个 jQuery 插件，它可以延迟加载长页面中的图片。在浏览器可视区域外的图片不会被载入,直到用户将页面滚动到它们所在的位置。在包含很多大图片的长页面中，延迟加载图片可以加快页面加载速度，在某些情况下还可以帮助降低服务器负担。下面我们介绍一下如何使用此款 jQuery 插件在中实现图片延迟加载的效果。

1. 下载 lazyload 源代码,将下载的压缩包解压，复制 jquery.min.js 和 jquery.lazyload.min.js,放到自己的主题目录。

2. 切换到主题目录，打开header.PHP，引用 jquery.min.js和jquery.lazyload.min.js，详细的使用代码如下：

Crayon-5c891d521fe7b438215572" class="Crayon-Syntax Crayon-theme-classic Crayon-font-monaco Crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouSEOver" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">

Crayon-toolbar" data-settings=" mouSEOver overlay hide delay" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;">Crayon-title">header.PHP

Crayon-tools" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;">Crayon-mixed-highlight" title="Contains Mixed Languages">

Crayon-button Crayon-nums-button" title="Toggle Line Numbers">

Crayon-button-icon">

Crayon-button Crayon-plain-button" title="Toggle Plain Code">

Crayon-button-icon">

Crayon-button Crayon-wrap-button" title="Toggle Line Wrap">

Crayon-button-icon">

Crayon-button Crayon-expand-button" title="Expand Code">

Crayon-button-icon">

Crayon-button Crayon-copy-button" title="Copy">

Crayon-button-icon">

Crayon-button Crayon-popup-button" title="Open Code In New Window">

Crayon-button-icon">

Crayon-info" style="min-height: 16.8px !important; line-height: 16.8px !important;">

Crayon-plain-wrap">

Crayon-main" style="">Crayon-table">Crayon-row">

Crayon-nums " data-settings="show">

Crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;">

Crayon-num" data-line="Crayon-5c891d521fe7b438215572-1">1

Crayon-num Crayon-striped-num" data-line="Crayon-5c891d521fe7b438215572-2">2

Crayon-num" data-line="Crayon-5c891d521fe7b438215572-3">3

Crayon-num Crayon-striped-num" data-line="Crayon-5c891d521fe7b438215572-4">4

Crayon-num" data-line="Crayon-5c891d521fe7b438215572-5">5

Crayon-num Crayon-striped-num" data-line="Crayon-5c891d521fe7b438215572-6">6

Crayon-num" data-line="Crayon-5c891d521fe7b438215572-7">7

Crayon-num Crayon-striped-num" data-line="Crayon-5c891d521fe7b438215572-8">8

Crayon-num" data-line="Crayon-5c891d521fe7b438215572-9">9

Crayon-code">

Crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">

Crayon-line" id="Crayon-5c891d521fe7b438215572-1">Crayon-ta">

Crayon-line Crayon-striped-line" id="Crayon-5c891d521fe7b438215572-2">Crayon-ta">

Crayon-line" id="Crayon-5c891d521fe7b438215572-3">Crayon-ta">

3. 还是在主题目录里，打开 functions.PHP 文件，增加下面的代码，代码的目的是自动为图片添加 data-original 属性，以便实现 lazyload 延迟加载效果。

Crayon-5c891d521fe8e597106700" class="Crayon-Syntax Crayon-theme-classic Crayon-font-monaco Crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouSEOver" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">

Crayon-toolbar" data-settings=" mouSEOver overlay hide delay" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;">Crayon-title">functions.PHP

Crayon-tools" style="font-size: 12px !important;height: 18px !important; line-height: 18px !important;">

Crayon-button Crayon-nums-button" title="Toggle Line Numbers">

Crayon-button-icon">

Crayon-button Crayon-plain-button" title="Toggle Plain Code">

Crayon-button-icon">

Crayon-button Crayon-wrap-button" title="Toggle Line Wrap">

Crayon-button-icon">

Crayon-button Crayon-expand-button" title="Expand Code">

Crayon-button-icon">

Crayon-button Crayon-copy-button" title="Copy">

Crayon-button-icon">

Crayon-button Crayon-popup-button" title="Open Code In New Window">

Crayon-button-icon">

Crayon-info" style="min-height: 16.8px !important; line-height: 16.8px !important;">

Crayon-plain-wrap">

Crayon-main" style="">Crayon-table">Crayon-row">

Crayon-nums " data-settings="show">

Crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;">

Crayon-num" data-line="Crayon-5c891d521fe8e597106700-1">1

Crayon-num Crayon-striped-num" data-line="Crayon-5c891d521fe8e597106700-2">2

Crayon-num" data-line="Crayon-5c891d521fe8e597106700-3">3

Crayon-num Crayon-striped-num" data-line="Crayon-5c891d521fe8e597106700-4">4

Crayon-num" data-line="Crayon-5c891d521fe8e597106700-5">5

Crayon-num Crayon-striped-num" data-line="Crayon-5c891d521fe8e597106700-6">6

Crayon-num" data-line="Crayon-5c891d521fe8e597106700-7">7

Crayon-num Crayon-striped-num" data-line="Crayon-5c891d521fe8e597106700-8">8

Crayon-code">

Crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">

Crayon-line" id="Crayon-5c891d521fe8e597106700-1">Crayon-e">add_filterCrayon-h"> Crayon-sy">(Crayon-s">'the_content'Crayon-sy">,Crayon-h"> Crayon-s">'lazyload'Crayon-sy">)Crayon-sy">;

Crayon-line Crayon-striped-line" id="Crayon-5c891d521fe8e597106700-2">Crayon-t">functionCrayon-h"> Crayon-e">lazyloadCrayon-sy">(Crayon-sy">$Crayon-v">contentCrayon-sy">)Crayon-h"> Crayon-sy">{

Crayon-line" id="Crayon-5c891d521fe8e597106700-3">Crayon-h">Crayon-sy">$Crayon-v">loadimg_urlCrayon-o">=Crayon-e">get_bloginfoCrayon-sy">(Crayon-s">'template_directory'Crayon-sy">)Crayon-sy">.Crayon-s">'/loading.gif'Crayon-sy">;

Crayon-line Crayon-striped-line" id="Crayon-5c891d521fe8e597106700-4">Crayon-h">Crayon-st">ifCrayon-sy">(Crayon-o">!Crayon-e">is_FeedCrayon-sy">(Crayon-sy">)Crayon-o">||Crayon-o">!Crayon-v">is_robotsCrayon-sy">)Crayon-h"> Crayon-sy">{

Crayon-line" id="Crayon-5c891d521fe8e597106700-5">Crayon-h">Crayon-sy">$Crayon-v">contentCrayon-o">=Crayon-e">preg_replaceCrayon-sy">(Crayon-s">'//i'Crayon-sy">,Crayon-s">"\n"Crayon-sy">,Crayon-sy">$Crayon-v">contentCrayon-sy">)Crayon-sy">;

Crayon-line Crayon-striped-line" id="Crayon-5c891d521fe8e597106700-6">Crayon-h">Crayon-sy">}

Crayon-line" id="Crayon-5c891d521fe8e597106700-7">Crayon-h">Crayon-st">returnCrayon-h"> Crayon-sy">$Crayon-v">contentCrayon-sy">;

Crayon-line Crayon-striped-line" id="Crayon-5c891d521fe8e597106700-8">Crayon-sy">}

4. 在主题的根目录里放入一个加载的图片（GIF格式的），类似于下面的这张图片。

loading-x