关于lazyload图片延迟加载简单介绍

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

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

怎样使用lazyload？

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

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

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

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

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

<!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="images/0.jpg" /><br />
<div><a href="#"><img src="images/loading.gif" data-original="images/1.jpg"></a></div>
<div><a href="#"><img src="images/loading.gif" data-original="images/2.jpg"></a></div>
<div><a href="#"><img src="images/loading.gif" data-original="images/3.jpg"></a></div>
<div><a href="#"><img src="images/loading.gif" data-original="images/4.jpg"></a></div>
<div><a href="#"><img src="images/loading.gif" data-original="images/5.jpg"></a></div>
<div><a href="#"><img src="images/loading.gif" data-original="images/6.jpg"></a></div>
<div><a href="#"><img src="images/loading.gif" data-original="images/7.jpg"></a></div>
<div><a href="#"><img src="images/loading.gif" data-original="images/8.jpg"></a></div>
<div><a href="#"><img src="images/loading.gif" data-original="images/9.jpg"></a></div>
<div><a href="#"><img src="images/loading.gif" data-original="images/10.jpg"></a></div>
</body>
</html>

关于lazyload图片延迟加载简单介绍

怎样使用lazyload？

相关推荐