LazyLoad大家再熟悉不过的一个jquery插件了，它可以延迟加载长页面中的图片. 也就是说在浏览器可视区域外的图片不会被载入，直到用户将页面滚动到它们所在的位置才会加载并显示出来，这和图片预加载的处理方式正好刚好相反。图片不多的页面时，效果并不太明显，但是当页面大图片比较多的时候，这种效果就比较显著了，明显加快了页面的加载速度。浏览器将会在加载可见图片之后即进入就绪状态，在某些情况下还可以帮助降低服务器负担。
因此，比较流行的wordpress主题，typecho主题，emlog主题等都使用了lazyload图片延迟加载来实现快速加载页面。

当然啦，你的网站纯文字的，就没必要多搞个jquery插件了。

怎样使用lazyload？

其实很简单，只需在你所使用头部<head></head>标签中插入下面一段代码即可,你也可以添加到footer中。

1
2
3
4
5
6
7
8
9
 
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery-lazyload/1.9.5/jquery.lazyload.min.js"></script>
    <script type="text/javascript">
      jQuery(function() {          
          jQuery("img").lazyload({
            placeholder:"http://www.arao.me/loading.gif",
              effect:"fadeIn"
            });
          });
    </script>

以我的hexo网站和现在使用的next主题举例子，我是习惯把js添加到底部的，找到_layout.swig,路径在your-hexo-site\themes\next\layout,把前面的代码添加到</body>标签前面就OK了。
如果你是hexo其他主题的，找到footer.ejs文件，一般是在themes/你的主题/layout/_partial/路径下，把上述的代码添加进去就行了。
若是使用了wordpress，typecho，emlog等其他博客后台的，也差不多这样改，往你的主题模板</head>或者</body>前上述代码即可,我的typecho网站也是这样实现图片延迟加载的。
如果你希望没看到图片前先加载200px，可以通过设置阀值来控制，具体实现：

1
 
jQuery("img").lazyload({ threshold : 200 });

上面代码比较通用，基本满足你的网站图片延迟加载需求。
值得一提的是：

    1. lazyload依赖jquery，如果你的站点没引用juery，请先引入jquery。
    2. 在上述代码中，img是延迟加载所有图片，这里你可以根据不同模板作相应改动。比如我现在使用的next主题，可以改成#posts img，这样更改后，只延迟加载#posts容器内的图片，否则主题侧边的头像和协议图片也跟着延迟加载，等最后才加载出来。所以和我一样使用next主题的最后把jQuery(&quot;img&quot;)改成jQuery(&quot;#posts img&quot;)。使用其他模板的根据不同模板实际显示效果自行更改

      详细例子

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>图片加载技术实例-欢迎关注tinyphp的博客</title>

<SCRIPT src="jquery.js" type=text/javascript></SCRIPT>

<SCRIPT src="jquery.lazyload.js" type=text/javascript></SCRIPT>

<script type="text/javascript" charset="utf-8">

      $(function() {

          $("img").lazyload({

          placeholder : "images/loading.gif",

                 effect: "fadeIn"

           });

      });

</script>

<style>

img a,img{border:0px;}

div{ margin-bottom:10px;}

</style>

</head>

<body>

<img src="data:images/0.jpg" /><br />

<div><a href="#"><img src="data:images/loading.gif" data-original="images/1.jpg"></a></div>

<div><a href="#"><img src="data:images/loading.gif" data-original="images/2.jpg"></a></div>

<div><a href="#"><img src="data:images/loading.gif" data-original="images/3.jpg"></a></div>

<div><a href="#"><img src="data:images/loading.gif" data-original="images/4.jpg"></a></div>

<div><a href="#"><img src="data:images/loading.gif" data-original="images/5.jpg"></a></div>

<div><a href="#"><img src="data:images/loading.gif" data-original="images/6.jpg"></a></div>

<div><a href="#"><img src="data:images/loading.gif" data-original="images/7.jpg"></a></div>

<div><a href="#"><img src="data:images/loading.gif" data-original="images/8.jpg"></a></div>

<div><a href="#"><img src="data:images/loading.gif" data-original="images/9.jpg"></a></div>

<div><a href="#"><img src="data:images/loading.gif" data-original="images/10.jpg"></a></div>

</body>

</html>

关于lazyload图片延迟加载简单介绍的更多相关文章

  1. JQuery.lazyload 图片延迟加载

    1.引入  jquery.lazyload.js 2. 延时加载的方式 <script type="text/javascript">  $(function() {  ...

  2. BMP、GIF、JPEG、PNG以及其它图片格式简单介绍

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/songjinshi/article/details/37516649 BMP格式 BMP是英文Bit ...

  3. lazyload 图片延迟加载

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. jQuery前端插件以及图片延迟加载

    插件名称 用途 插件官网地址 fontawsome CSS图标插件 http://fontawesome.io easyui 基于jQuery的用户界面插件集合 http://www.jeasyui. ...

  5. JQuery LazyLoad实现图片延迟加载-探究

    对于大量图片的网站,图片延迟加载是提高速度和性能的好方法. 目前图片延迟加载主要分两大块,一是触发加载(根据滚动条位置加载图片):二是自动预加载(加载完首屏后n秒后自动加载其他位置的图片).大体常用的 ...

  6. jquery.lazyload 实现图片延迟加载jquery插件

    看到了淘宝产品介绍中,图片是在下拉滚动条时加载,这是一个很不错的用户体验.减少了页面加载的时间了,也减轻了服务器的压力,就查了下用JQuery..   什么是ImageLazyLoad技术 在页面上图 ...

  7. jquery.lazyload.js图片延迟加载

    转:http://www.jb51.net/article/50273.htm 这篇文章主要介绍了Jquery图片延迟加载插件jquery.lazyload.js的使用方法,需要的朋友可以参考下   ...

  8. jquery.lazyload.js 图片延迟加载

    当做网页的时候,特别是整个网页展示图片较多的时候,用到图片延迟效果是很好的 使用方法也非常简单. 1.在网页任何位置(一般是在</body>前面)加上如下代码(注意<script&g ...

  9. 前端优化之图片延迟加载（lazyload.js）

    要想缩短首屏加载时间,思路一般是减少http请求次数和降低每次的请求量.本文中使用现成的lazyload.js插件,文末会放出下载地址. lazyload.js可以实现图片分批次加载,不是一次性加载完 ...

随机推荐

  1. HDU 3605 Escape（状态压缩+最大流）

    http://acm.hdu.edu.cn/showproblem.php?pid=3605 题意: 有n个人和m个星球,每个人可以去某些星球和不可以去某些星球,并且每个星球有最大居住人数,判断是否所 ...

  2. Android -- service的开启方式， start开启和绑定开启服务，调用服务的的方法, aidl调用远程服务

    1. 概述 bindService() 绑定服务  可以得到服务的代理人对象,间接调用服务里面的方法. 绑定服务: 间接调用服务里面的方法.           如果调用者activity被销毁了, ...

  3. c++ 将容量设置为容器的长度（shrink_to_fit）

    #include <iostream> #include <vector> using namespace std; int main () { vector<); co ...

  4. TCP协议和UDP协议区别

    tcp协议:可靠的.面向连接的协议(eg:打电话).传输效率低全双工通信(发送缓存&接收缓存).面向字节流.使用TCP的应用:Web浏览器:文件传输程序 udp协议:不可靠的.无连接的服务,传 ...

  5. 关于UDP很好的书籍和文章（整理、持续更新）

    文章 告知你不为人知的 UDP:疑难杂症和使用(必看)

  6. wpf中的触发器详解 （转自 乂乂的日志 - 网易博客）

    2010-03-24 16:19:07|  分类: WPF相关 |  标签: |字号大中小 订阅     wpf中的触发器详解 WPF/C# 2009-08-24 11:32:50 7.1.2  简单 ...

  7. 表统计信息（storge）相关

    select t1.NUM_ROWS,t1.BLOCKS,t1.EMPTY_BLOCKS,t1.AVG_SPACE,t1.CHAIN_CNT,t1.AVG_ROW_LEN from user_tab_ ...

  8. C#删除图片问题

    public Image GetImage(string path) { FileStream fs = new FileStream(path, FileMode.Open, FileAccess. ...

  9. IOS-常用第三方开源框架介绍

    iOS开发-常用第三方开源框架介绍(你了解的ios只是冰山一角) 时间:2015-05-06 16:43:34      阅读:533      评论:0      收藏:0      [点我收藏+] ...

  10. 3d世界是怎样呈现到屏幕上的

    要把一个3d物体呈现在屏幕上,要经过一系列的步骤. 描述3d世界 把3d世界绘制在二维屏幕上 如何描述一个3D世界? 数学家早就给出了3D世界的模型,我们日常最熟悉的3维坐标系就是一个欧几里得空间(线 ...