CDN图片加速，实现图片慢加载

摘要

本文介绍如何利用Lazyload结合CDN实现是图片慢加载，本人为了实现图片的通过CDN服务器进行图片的存放，
并且通过LAZYLOAD实现CDN的慢加载，鉴于LAZYLOAD的慢加载设置要求特点，自己编写一个脚本实现批量添加HTML属性
通过我的脚本您可以做到自行设置您的CDN地址，CLASS,和临村图片设置。如果您不了解LAZYLOAD，请移步批量修改HTML TAG,实现LAZYLOAD慢加载图片，本章是针对此章的优化部分。
HEXO-建站系列
 HEXO-优化系列
 HEXO-进阶系列

前言

本脚本是结合jquery Lazyload的实现，你需要将jquery lazyload预先加载，如和你需要获取jquery lazyload的代码
请点击 jquery_lazyload

实现步骤

简单的实现过程步骤如下：

1、下载本人编写的脚本文件”hexo-jorycdnload“
2、解压文件hexo-jorycdnload.zip，并将里面的hexo-jorycdnload文件夹，放到HEXO根目录下的node_modules下面
3、修改HEXO根目录下的package.json，添加本脚本的相关信息
4、修改HEXO根目录下的_config.yml文件添加相应的字段属性

5、修改主题目录下的layout\_layout.swig，在最尾添加LAZYLOAD的加载代码，并设置相关属性(在_config.yml的属性)

实现过程

下载hexo-jorycdnload.zip

过程略

解压放到node_modules

注意：解压的文件必须以Node_modules下的hexo-jorycdnload根目录

配置package.json文件

配置站点主目录下的package.json文件，添加如下属性

修改主站点配置文件_config.yml

修改主站点配置文件_config.yuml,添加配置的选项如下(本人使用的是七牛CDN，注册七牛CDN)

jorycdnload:
  enable: true                              #开启CDN慢加载
  tagclass: jory_lazyimg                    #配置图片的CLASS属性，此部分方便您在启用图片LAZYLOAD的时候只针对此CLASS的图片
  tmpimglink: /images/loading2.gif          #临时图片就是没加载原始图片前的图片
  cdnlink: http://o6sn177if.bkt.clouddn.com #CDN服务器地址，本例为七牛的CDN地址
 #cdnlink:

修改`layout\_layout.swig`

这里介绍如何在你的网站开启lazyload的慢加载，操作前还是一句，您需要预先加载Jquery_lazyload.js的脚本。
以下是加载代码，放到_layout.swig的最尾端
下面代码，img.jory_lazyimg就是lazyload只生效与这些class(jory_lazyimg)的img标签
其次jory_lazyimg就是第四部设置的tagclass.

<script type="text/javascript">
      jQuery(function() {  
	  	  
          jQuery("img.jory_lazyimg").lazyload({
			  delay:5000
              effect:"fadeIn"
            });	
		
		
          });

</script>

测试

到此您经已经设置好CDN慢加载的所有设置
测试方法：
你可以是IMG的swig语法或者其他语法，本以SWIG语法为例，图片您只需要填写相对位置即可。我的脚本会自动协助您加上您的CDN地址:http://cndurl/images/yourpic

1	{% img /images/20160522164827.jpg %}

直接的测试效果图

结语

如果你还需要了解更多技术文章信息，请继续关注Jory博客
Jory's Blog Share For you!Welcome to JORY'S BLOG

摘要

前言