为你的站点加上“懒加载”——提高用户体验&节省流量

简介

通常来说,一个正常web页面是由图片和文字以及各种CSS,JS构成,而这其中,拖慢网速的罪魁祸首就是图片。懒加载即将页面中的图片分布加载,边浏览边加载,从而减轻服务器压力以及减轻流量的浪费。

LazyLoad

lazyload.js简介

Lazy Load是一个用js编写的jQuery插件,用来实现图片的延迟加载。只有在浏览器可视区域的图片才会被加载,没有滚动到的区域img标签上会有一个占位图片,而真实图片不会被载入。当页面比较长,图片比较多的时候,延迟加载图片可以加快页面加载速度,在某些情况下降低服务器负担。

原理分析

<img class="lazy" src="images/loading.gif" data-original="images/example.jpg" width="640" heigh="480">

1

<img class="lazy" src="images/loading.gif" data-original="images/example.jpg"  width="640" heigh="480">

将图片真实地址存放于data-original(这个可自定义),src属性用一个小的加载中动图占位,在用户浏览到该图片时,再将真实图片地址取出,实现"边浏览边加载",从而减轻服务器压力以及减轻流量的浪费。

优势

提升用户体验

提升网页加载速度,用户浏览更流畅.(下图为开启lazyload前后的加载速度详图)

减轻服务器负担

lazyload将一次性加载完的网页资源分步加载,从而减轻了服务器的负担.

减少资源浪费

边浏览边加载,用户浏览到一半时退出即可省下不需要加载的图片流量。

通俗来讲就是 “喝多少倒多少”

战前准备

效果预览

准备工作

  • WordPress博客
  • Lazyload.js(本文提供下载) loading动图(文件已打包,也可以百度找资源)
  • 一个聪明的大脑

文件下载

云盘下载 备用下载

工作大纲

  1. 引入jquery.min.js和LazyLoad.js
图片链接转换
   <img src="images/example.jpg" width="640" heigh="480"> //上转换下 <img class="lazy" src="images/loading.gif" data-original="images/example.jpg" width="640" heigh="480">
     1
2
3
  <img src="images/example.jpg" width="640" heigh="480">
//上转换下
<img class="lazy" src="images/loading.gif" data-original="images/example.jpg" width="640" heigh="480">   
 
  
  1. 需要懒加载的地方自行修改

WordPress站点部署LazyLoad

header引入JS

在主题文件夹header.php文件夹的适当位置加入以下代码

<script src="<?php%20echo%20get_template_directory_uri();%20?>/js/jquery.min.js" type="text/javascript"></script>//主题中已引用Jquery可省略这行 <script src="<?php%20echo%20get_template_directory_uri();%20?>/js/jquery.lazyload.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $("img").lazyload({ effect:"fadeIn" }); $("img").lazyload({ threshold : 200 }); }); </script>

12345678910

<script src="<?php%20echo%20get_template_directory_uri();%20?>/js/jquery.min.js" type="text/javascript"></script>//主题中已引用Jquery可省略这行<script src="<?php%20echo%20get_template_directory_uri();%20?>/js/jquery.lazyload.min.js" type="text/javascript"></script><script type="text/javascript"> $(function() { $("img").lazyload({ effect:"fadeIn"   }); $("img").lazyload({ threshold : 200 }); });</script>

PS:以上代码必须<head>···</head>内,jquery.lazyload.min.js引用必须在jquery.min.js之后。

threshold:200(距离未加载图片200px时开始加载)

为图片自动添加 data-original 属性

在主题文件夹function.php文件夹加入以下函数

//小文's blog图片链接添加data-original 属性函数 add_filter ('the_content', 'lazyload'); function lazyload($content) { $loadimg_url=get_bloginfo('template_directory').'/images/loading.gif';//loading图片地址,根据个人情况修改 if(!is_feed()||!is_robots) { $content=preg_replace('/<img(.+)src=[\'"]([^\'"]+)[\'"](.*)>/i',"<img\$1src=\"$loadimg_url\" data-original=\"\$2\"\$3>\n<noscript>\$0</noscript>",$content); } return $content; } //END

12345678910

//小文's blog图片链接添加data-original 属性函数add_filter ('the_content', 'lazyload');function lazyload($content) {    $loadimg_url=get_bloginfo('template_directory').'/images/loading.gif';//loading图片地址,根据个人情况修改    if(!is_feed()||!is_robots) {        $content=preg_replace('/<img(.+)src=[\'"]([^\'"]+)[\'"](.*)>/i',"<img\$1src=\"$loadimg_url\" data-original=\"\$2\"\$3>\n<noscript>\$0</noscript>",$content);    }    return $content;}//END

在主题文件夹的/images/文件夹下添加loading图片(以下是本站的loading图片,可以自行百度)

云盘下载

此时访问博客文章,即可实现懒加载的效果。

进阶篇——缩略图的懒加载

相信不少博客主题的首页文章排版都是 缩略图+文章摘要 的格式,其中的缩略图不少还是用timthumb 截图的。那么这种排版格式就给懒加载提供了便利,我们只需要小小改动一下代码。

对于缩略图,找到代码可能如下:

<img src="<?php%20bloginfo('template_url');%20?>/timthumb.php?src=<?php%20echo%20post_thumbnail_src();%20?>&h=150&w=200&zc=1" alt="<?php the_title(); ?>"/>

1

<img src="<?php%20bloginfo('template_url');%20?>/timthumb.php?src=<?php%20echo%20post_thumbnail_src();%20?>&h=150&w=200&zc=1"  alt="<?php the_title(); ?>"/>

那么修改为如下即可:

<img class="lazy" src="/image-pending.gif" data-original="<?php%20bloginfo('template_url');%20?>/timthumb.php?src=<?php%20echo%20post_thumbnail_src();%20?>&h=150&w=200&zc=1" alt="<?php the_title(); ?>"/>

1

<img class="lazy" src="/image-pending.gif" data-original="<?php%20bloginfo('template_url');%20?>/timthumb.php?src=<?php%20echo%20post_thumbnail_src();%20?>&h=150&w=200&zc=1"  alt="<?php the_title(); ?>"/>

进阶篇——头像图片的懒加载

正常的话,头像的加载在WordPress 中是用诸如<?php echo get_avatar($user_email, 40); >的函数,在前台生成的html 代码其实也是img 标签,该函数其实与下面的代码差不多:

<img width="40" height="40" class="comments-widget-avatar alignleft" src="http://www.gravatar.com/avatar/'.md5(strtolower(get_comment_author_email())).'?s=40&r=g ">

12

<img width="40" height="40" class="comments-widget-avatar alignleft" src="http://www.gravatar.com/avatar/'.md5(strtolower(get_comment_author_email())).'?s=40&r=g ">

要部署懒加载,先将<?php echo get_avatar($user_email, 40); >函数改为如上面的代码,然后再改为如下:

<img width="40" height="40" class="lazy comments-widget-avatar alignleft" src="/image-pending.gif" data-original ="http://www.gravatar.com/avatar/'.md5(strtolower(get_comment_author_email())).'?s=40&r=g ">

12

<img width="40" height="40" class="lazy comments-widget-avatar alignleft" src="/image-pending.gif" data-original ="http://www.gravatar.com/avatar/'.md5(strtolower(get_comment_author_email())).'?s=40&r=g ">

更多玩法可以在文章下留言!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

2 条评论
登录 后参与评论

相关文章

来自专栏破晓之歌

Vue+element图片上传 原

采用比较笨的js解决方法,将bolb文件打开,读取src属性(这是一个base64的数据流),把src的内容一起发送给后端。

913
来自专栏技术小黑屋

实时预览Markdown利器

使用MBP15寸有点高不成低不就,接显示器分辨率下降(浪费Retina屏),不接显示器屏幕不是很大。

1273
来自专栏张善友的专栏

強大的jQuery Chart组件-Highcharts

Highcharts是一个制作图表的纯Javascript类库,主要特性如下: 兼容性:兼容当今所有的浏览器,包括iPhone、IE和火狐等等; 对个人用户完全...

2145
来自专栏林德熙的博客

wpf 如何使用 Magick.NET 播放 gif 图片 安装 Magick.NET解析 gif播放 gif

最近在做 gif 播放,发现 gif 播放需要很多内存,于是就使用 Magick.NET 播放,但是这个方式也需要很多的内存。播放一张 uwp 萤火虫 需要 ...

462
来自专栏木子昭的博客

Python综合Web案例_在线为头像添加装饰第二步:上传头像, 并实时裁剪第三步: 生成图片,长按保存

前几天元旦, 用Python为自家公众号做了一个"革面"的活动页面,活动的效果非常好,分享一下实现过程 前端: BootStrap, Jquery, Jcro...

2846
来自专栏大前端开发

【新闻】微信小程序开发工具升级到版本 0.10.102700

今晚引来了微信小程序开发工具《微信web开发者工具》的一次更新,此次更新新增了很多API,修复了一些bugs,也标记了一些即将废弃的API。这次更新也升级了开发...

815
来自专栏张善友的专栏

Windows Phone 7实战 第一天 设计启动页面和应用程序图标

每一个 Windows Phone 7 应用程序在启动时多少会花上一些时间,在这个等待的时刻经常都会摆放一些启动画面 (Splash screen) 先来充充场...

1939
来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

React Native0.50+开发指导

概要 本文主要对React Native 0.50的关键性的更新做个讲解和开发适配指导,希望能对从事React Native开发的你有所帮助: 在兼容性方面新增...

2544
来自专栏王二麻子IT技术交流园地

十一、VueJs 填坑日记之使用Amaze ui调整列表和内容页面

上一篇博文我们整合了Amaze ui,并且调整了一个头部header和底部footer文件,其实做起来也很简单,只要按照步骤来做,完全没有问题。今天我们来重新调...

21310
来自专栏静默虚空的博客

jQuery 简介和安装

什么是jQuery jQuery是一个轻量级的"写的少,做的多"的JavaScript库。 jQuery库包含以下功能: HTML 元素选取 HTML 元素...

2015

扫码关注云+社区