YAOHAIXIAO.COM

HTML(5),CSS(3),JavaScript,DOM,Ajax,JSON,Front-end technologies & Yaohaixiao

热门标签:JavaScript Performance 前端开发 前端性能优化 原创

Rss

Home » Frontend » JavaScript » jQuery » jQuery Plugins » 利用 jQuery.lazyload 插件优化 WordPress 的 Gravatar 评论图片和特色图片加载

利用 jQuery.lazyload 插件优化 WordPress 的 Gravatar 评论图片和特色图片加载

这几天一直都在想办法优化 BlueNight 主题的前端性能和增加适当的交互程序提高用户体验。今天就来介绍一下如何利用 jQuery.lazyload 插件来优化WordPress 的 Gravatar 评论图片和特色图片加载。利用jQuery.lazyload 插件懒加载页面中的图片,从而提升页面的响应速度,优化一下WordPress 的前端性能。

什么是 lazyload?

优势

首先还是介绍一下什么是 lazyload,或者说为什么使用 lazyload?lazyload 直接翻译过来就是懒加载,是利用 JavaScript 程序动态的加载图片的一个特效。这个效果的特殊之处是可以做到当用户的鼠标滚动到快要看到图片的时候,才开始加载图片,而不是在页面一开始加载的时候将所有的图片加载完毕。而这么处理的好处是,在页面一开始加载的时候,只加载了用户可以看到的区域的图片,而看不到的,则不加载。这样一来,页面初始加载的时候,会少很多图片的请求,减少了 HTTP 请求数量,同时由于图片相对来说在页面元素中所占的体积比较大,所以初始加载的时候减少了不少的页面体积,所以页面的响应速度会快不少。所以前面才会说,使用 lazyload 可以优化前端的性能。这些也是我选择这个处理方式的原因。

缺点

所有的事情都是有好和坏的两面的,lazyload 也有一些缺点。首先,lazyload 要依赖 JavaScript,如果没有 JavaScript 支持,而又没有做向后兼容,那么页面上的图片你的用户将都无法看到,或者只能看到初始化的默认图片。其次,lazyload 相对来说,对 SEO 是有负面影响的。这里的负面影响是搜索引擎在收录你网站上图片的时候,会收录不到你 JavaScript 替换后要展示的图片。最后,就是 lazyload 需要使用 JavaScript 遍历查找页面中的目标图片,我们知道 JavaScript 处理 DOM 相关的操作是比较耗资源的。所以处理时,这方面的性能消耗相对直接显示图片也是用户需要额外负担的。

jQuery.lazyload 在 WordPress 中具体的实施方法

既然最终选择了使用 lazyload 还是因为它带来的性能优化和用户体验的提升的比例要比它的缺点的影响比例要好。jQuery.lazyload 可以到 http://www.appelsiini.net/projects/lazyload 下载。具体的操作方法也可以看页面的 API 文档,我这里就只介绍在 WordPress 中如何处理。

用默认图片替换原始的图片

jQuery.lazyload 插件需要使用一个默认的图片替换原始的图片,而将原始图片的路径写到data-original这个自定义属性的值里,例如:

<img height="106" widt="106" alt="Introducing PHP Loader" class="lazy entry img post-image-prelaoder post-thumbnail" data-original="http://www.yaohaixiao.com/wp-content/uploads/2012/07/auld-yuiconf2009-phploader-106x106.jpg" src="http://www.yaohaixiao.com/images/default-photo.jpg" />

例子中是展示的是 lazyload 替换特色图片的例子,用过 WordPress 的朋友都知道,WordPress 提供了 the_post_thumbnail() 函数打印特色图像,用起来也十分方便。不过这个函数是直接输出完整的 img 标签,而我们这里只需要特图片的路径。不过没有关系,WordPress 的工程师为我们提供了 wp_get_attachment_image_src() 函数来处理这个问题。具体的操作技巧参考《wp_get_attachment_image_src() 函数详解 – 如何函数获得 WordPress 中的特色图像路径》。那么上面的特色图像的WordPress 的源代码就是这样的:

<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/no-photo.gif" data-original="<?php $timthumb_src = wp_get_attachment_image_src( get_post_thumbnail_id(get_the_ID()), 'imaj' ); echo $timthumb_src[0]; ?>" class="lazy entry img post-image-prelaoder post-thumbnail" alt="<?php the_title(); ?>" widt="106" height="106" /></a>

同样的 Gravatar 的评论头像我们也不能直接使用 get_avatar() 函数输出整个 img 标签,而需要另外用其他方法获得头像路径。具体的操作参考《利用 get_comment_author_email() 函数获得 Gravatar 评论图像路径》。我们得到的 WordPress 的代码如下:

<img src="'.get_template_directory_uri().'/images/default-avatar.jpg" class="lazy avatar" data-original="http://www.gravatar.com/avatar/'.md5(strtolower(get_comment_author_email())).'&s=32&d=mm&r=g" width="32" height="32" alt="'.get_comment_author().'" />

编写 JavaScript 代码

在做好准备工作后,我们就需要编写一些简单的代码来调用 jQeury.lazyload。BlueNight 主题的代码如下:

$('#main img.lazy').lazyload({
        threshold: 100,
        effect: "fadeIn"
    });
    $('#side img.lazy').lazyload({
        threshold: 100,
        effect: "fadeIn"
    });
    $('#footer-widgets img.lazy').lazyload({
        threshold: 100,
        effect: "fadeIn"
    });

我没有直接使用 $('img.lazy') 或者 $('.lazy') 这样的选择器,如果这样处理,JavaScript 就会遍历整个页面中的所有元素,相对的我使用先找到指定的 id 元素,然后在则个元素下查找 .lazy 图片。这里的选择器和 CSS 选择器的解析顺序是不一样的,jQuery 里的选择器是从左向由解析查找的。所以虽然选择器写得麻烦一点,但是较少了不少的 DOM 查询,提高了性能。

总结

具体的使用方法就这么简单,不过最后我要说的是,我使用 lazyload 加载的图片都是列表页的图片和 Gravatar 的图片,而不是对single.php 详细内容的图片做 lazyload。因为那里的图片是比较有用的图片数据,是希望搜索引擎收录的。所以使用 lazyload 也要注意,针对这种特色图像这种栏目或文章封面性质的图片使用,会比较合适。而文章页的具体的数据图片或者相册页面的图片还是通过无损的压缩图片大小,一次加载这些图片数据会比较好。这里也是我前面介绍 lazyload 的缺点的意义,要有针对性的使用一项技术,发挥它的长处。

声明:本文采用BY-NC-SA协议进行授权。转载请注明转自:利用 jQuery.lazyload 插件优化 WordPress 的 Gravatar 评论图片和特色图片加载

« »

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(Spamcheck Enabled)