批量修改HTML TAG,实现LAZYLOAD慢加载图片

摘要

本文介绍如何利用Lazyload是图片慢加载，简单的针对lazyload去做慢加载，网上的文章有很多。
而且也有很多说法，主要是围绕是否能真正的实现慢加载，还是加重了服务器负担，本文基础，我已经
在搜索大量的上网技术文章和结合自己的此时得出的慢加载方法，是否成功请关注本章最后的GIF图片，
图片简单的发出了我关于慢加载的测试截图。不说其他，先回到正题：”如和批量修改HTML TAG实现，慢
加载”。
HEXO-建站系列
 HEXO-优化系列
 HEXO-进阶系列

LAZYLOAD简单介绍

LAZYLOAD是什么？

在进行操作前，我们有必要先了解LAZYLOAD是什么，和要实现LAZYLOAD的要求。
LAZYLOAD是一款实现图片慢加载的JS,原理是通过对IMG标签下的SRC和结合其他的属性协同操作，实现
用户浏览器界面浏览到图片位置才加载的技术，当然浏览到图片位置才加载只是其中的一个实现事件
你也可以定义点击，或者鼠标移动到图片实现加载。里面还有很多设置，不是本章要讲的，这里只是
简单提到。更多的内容：请移步 “**LAZYLOAD官网“

LAZYLOAD使用要求！

使用LAZYLOAD你需要满足以下的标签要求：

1、IMG必须有data-original属性：此属性是真实的图片地址。通过LAZYLOAD实现给SRC赋值
2、要有CLANSS=”你的样式”；这里主要是为了方便针对性的IMG标签实现LAZYLOAD.

code

1	<img class="myclass" data-original="img/yourimg.jpg" width="640" height="480">

当你的IMG标签满足以上要求，使用以下代码实现对IMG进行LAZYLOAD实现(渐进显示)：

code

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

LAZYLOAD实际过程使用的难点

以上的LAZYLOAD介绍是官方最新的方法，真实实现LAZYLOAD的效果。但是我们遇到一个问题，就是
IMG的标签必须符合上面的要求。我们可以在写文章的是否把data-original,CLASS,等属性都写上，
但是每篇文章都这样写显然是不合理，其次如果你希望使用markdown语法，这样估计是不支持这些
属性的添加。所以这样一个图片慢加载实现，显然还是不够完善，所以针对此问题，本章给出如果
通过批量对站点的IMG标签自动打上对应的属性。

实现操作代码

实现方式：

利用hexo 下的node_modules 对HTML进行修改。不知道您们是否了解nofollow的插件，这个插件的
原理就是对HTML页面的内容进行修改，将特定的a标签，加入nofollow的标签。所以本人就萌生了
投机取巧方法，是否我能把对应修改IMG标签的代码放到nofollow里面进行协同一起修改。经过我的
测试，是可以的。另外我也就投机取巧。高手可以直接创建一个node_moudles的插件实现。

实现过程：

先说说如和实现,前提你要已经安装了hexo-autonofollow的插件。
修改你的hexo目录下的hexo-autonofollow下的Lib下的filter.js
修改的内容如下：

在var URL = require(‘url’); 下加入以下内容：

code

var baseUrl = "";
var loading = "/images/loading2.gif";   //可以修改这里：占位图片
var oldsrc = '';

function stringStartsWith(string, prefix) {
    return string.slice(0, prefix.length) == prefix;
}

function endsWith(str, suffix) {
    return str.indexOf(suffix, str.length - suffix.length) !== -1;
}

在 var $ = cheerio.load(source, {decodeEntities: false});后面加入

code

  $('img').each(function(index, element) {
      oldsrc = $(element).attr('src');

      

if (oldsrc && !$(element).hasClass('lazy') && !$(element).hasClass('skip')) {
          $(element).addClass('lazy');
          $(element).attr({
              src: loading,
              'data-original': baseUrl + oldsrc 
          });

      }
  });

全部修改后保存。

修改后引用：

可以将引用代码放到”你的出题”下的”layout”下的”_layout.swg”文件的最后面即可

code

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