活用Lazyload.js，为你的CDN图片加上nofollow(绝招来啦！)

摘要

不知道大家有没有了解lazyload的实现原理。如果没有请浏览以下给出的系列，本章将会介绍一个lazyload.js的脚本的一个活用方法，通过本章，相信你会了解到简单lazyload原理和通过lazyload修改
图片或者A标签的属性的绝招。通过绝招我们实现的为A或者图片IMG标签打上我们想要的属性。本章目的是为Fancybox的a标签打上nofollow属性，减少权重的丢失。
HEXO-建站系列
 HEXO-优化系列
 HEXO-进阶系列

前沿

在说绝招之前，我们先讲讲两部分，有利于绝招的使用理解。

hexo-autonofollow原理
Fancybox插件操作IMG的介绍
Lazyload操作图片的介绍
hexo-autonofollow原理
据我发现，hexo-autonofollow是在hexo编译生成过程中将相关文件HTML a标签根据的设置要求加上nofollow属性，其操作是hexo编译生成静态文件过程中发生，这个点很重要（是编译过程）

Fancybox插件操作IMG的介绍

附上我博客网站的一个fancybox使用代码例子
以下是我的Lazyload和fancybox插件效果的最终代码，在之前fancybox做了哪些操作？

1
2
3

<a class="fancybox" href="http://o6sn177if.bkt.clouddn.com/17901865820160512104156059.jpg">
<img style="display: none;" src="http://o6sn177if.bkt.clouddn.com/17901865820160512104156059.jpg" class="'jory_lazyimg'" data-original="http://o6sn177if.bkt.clouddn.com/17901865820160512104156059.jpg">
</a>

请留意以上部分。先讲讲原理。
当页面加载后->fancybox 会给Img标签加上上一层的a标签，并给予属性class="fancybox"
fancybox通过class属性和插件本身的css文件给予A标签一定的样式。所以才看到我们的Fancybox 图片框框。故在fancybox插件在页面初始化前，应该只有img的标签
如：

<img style="display: none;" src="http://o6sn177if.bkt.clouddn.com/17901865820160512104156059.jpg" class="'jory_lazyimg'" data-original="http://o6sn177if.bkt.clouddn.com/17901865820160512104156059.jpg">

结论：Fancybox的操作过程是在网页加载过程中实现，这点很重要（是已经为静态文件，并网页加载）

Lazyload操作图片的介绍

摒弃lazyload的实际实现原理不说，其简单的原理过程如Fancybox一下样，在页面加载过程对IMG进行
对应的操作。如果你有实际了解过Lazyload你应该知道其实现慢加载的原理其实就是将data-original下的值替换到src的值来实现慢加载的图片效果。
结论：lazyload的操作过程是在网页加载过程中实现，这点很重要（是已经为静态文件，并网页加载）

总结与绝招介绍

总结与引发的问题

首先我们本节的目标是：实现为Fancybox的A标签加上nofollow
通过前面针对lazyload、Fancybox、hexo-autonofollow的相关原理简单介绍，我们的发现一个问题
hexo-autonofollow是编译过程才会添加nofollow属性，但是Fancybox生成对应a标签是在编译后并
实际页面访问加载后才会出现的，所以会出现一个情况是：Fancybox的A标签并没有加上nofollow的属性。同时在在实际使用lazyload与Fancybox的结合使用过程，你还会发现一个问题：fancybox在
为IMG生成A标签时，会把img的src属性赋值到其A标签的href值中。这里又会引发一个问题就是lazyload与Fancybox的结合使用后，fancybox弹出的框框无法正常显示图片根据以上部分我们会发现两个问题，在你使用了Fancybox和Lazyloaad后

1. Fancybox的A标签并没有加上nofollow的属性
2. fancybox弹出的框框无法正常显示图片

这样我们有没有方法实现解决以上问题：当然有，看绝招！

绝招来啦

如果你使用过lazyload,你应该知道，其实现需要在_layout.swig的末尾加一段初始化代码，经过
我的检查，我发现关于Fancybox与Lazyload的加载先后顺序是 fancybox->lazyload,这点很重要
因为在加载Lazyload前，img标签的父标签已经打上Fancybox的a标签。根据这个特点，我想到一个情况，我能否通过lazyload的js在操作Img的同时也在操作Fancybox已经为IMG加上的A标签。既然我能提到，当让能做咯，辛苦我在细究了lazyload.js文件代码后，终于发现关于lazyload操作
img标签的代码位置。重头戏来了，请看下面：

没有改前的代码

$("<img />")
        .bind("load", function() {

            var original = $self.attr("data-" + settings.data_attribute);
             $self.hide();
             if ($self.is("img")) {
                                $self.attr("src", original);
	       /* 代码操作位置 */
								
            } else {
                                $self.css("background-image", "url('" + original + "')");
                 }
             $self[settings.effect](settings.effect_speed);
                self.loaded = true;

修改后的代码：

添加以下代码：

1 2	$self.parent().attr("href",original); $self.parent().attr("rel",'external nofollow');

代码修改后的结果

$("<img />")
     .bind("load", function() {

    var original = $self.attr("data-" + settings.data_attribute);
                            $self.hide();
     if ($self.is("img")) {
                                $self.attr("src", original);
		/* 新加代码的操作位置 */
		$self.parent().attr("href",original);
		$self.parent().attr("rel",'external nofollow');
								
    } else {
           $self.css("background-image", "url('" + original + "')");
     }
    $self[settings.effect](settings.effect_speed);

    self.loaded = true;

总结

通过以上操作你成功的实现了
1. Fancybox的A标签并没有加上nofollow的属性
2. fancybox弹出的框框无法正常显示图片

结语

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

摘要

前沿

hexo-autonofollow原理