jQuery插件: lazy loader 使用

来源：互联网发布：king软件下载编辑：程序博客网时间：2024/06/01 09:29

文章参考网上多个例子，进行了总结如下：

该文章分为两种加载方式：一种是图片延迟加载，另一种是网页的延迟加载来进行介绍。

1.图片延迟加载

所谓图片异步加载，意思是不用一次把图片全部加载完，你可以叫它延迟加载，缓冲加载都行，现在许多大型的网站都有这个功能，仔细留心一下就可以看到。

看看你有没有这种需求：某篇文章图片很多，如果在载入文章时就载入所有图片，无疑会延缓载入速度，让用户等更久，所以，我想找这样一种插件，让网页只加载浏览器视野范围内的图片，没出现在范围内的图片就暂不加载，等用户滑动滚动条时再逐步加载。lazyload就是用来实现这种效果。

lazyload.js其实是jQuery的一个插件，全称是jquery.lazyload.js，看它的名字就知道它的作用了——就是偷懒载入的意思。由于它是javascript写的，所以适用于所有网页，包括Wordpress。

可参考lazyload实例

打包下载：http://www.aspbc.com/code/showcode.asp?id=158

演示地址：http://www.aspbc.com/demo/lazyload

压缩包中除了lazyload.js外，还有一个grey.gif图片文件。这个图片的作用是，当页面上图片未载入时，就显示这张图片。

如果需要在项目中嵌入该延迟加载功能，需要在页面嵌入如下代码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">

<script type="text/javascript" src="lazyload/jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="lazyload/jquery.lazyload.js"></script>
<script type="text/javascript">
  jQuery(document).ready(
   function($){
   $("img").lazyload({
        placeholder : "lazyload/grey.gif", //加载图片前的占位图片
        effect      : "fadeIn" //加载图片使用的效果(淡入)
   });
   });
</script>
</head>
<body>
    <div style="text-align: center;width: 100%;">
      <div><img   src="images/bmw_m1_hood.jpg" width="640" height="480"> </div>
      <div><img   src="images/bmw_m1_side.jpg" width="640" height="480"> </div>
      <div><img src="images/corvette_pitstop.jpg"    width="640" height="480"/> </div>
      <div><img src="images/corvette_pitstop.jpg"   width="640" height="480"/> </div>
      <div><img src="images/viper_1.jpg"   width="640" height="480"/> </div>
      <div><img src="images/viper_corner.jpg"   width="640" height="480"/> </div>
   </div>
</body>
</html>

保存上传后，你会发现当你将滚动条慢慢下拉时，图片会一张一张加载出来，并带渐显效果，对用户体验非常友好。

由于插件的版本比较多，如果遇到浏览器兼容的问题，可以参考文章 http://www.jb51.net/article/26528.htm 进行解决。已经对一些参数的解释及如何使用。

另外对官网上进行翻译后的链接：http://bbs.qibosoft.com/read.php?tid=402811

2.网页延迟加载

延迟加载网页效果可以参考谷歌的图片搜索页，迅雷首页，淘宝网，QQ空间等
有关详细解释参考 http://www.jb51.net/article/26125.htm 对网页的延迟加载进行分析和总结。及代码使用解释。

页面延迟加载有关文章：http://www.jb51.net/article/26125.htm