Web图片滚动条加载、延迟加载技术LazyLoad研究

最新推荐文章于 2024-04-24 09:44:44 发布

sonikk

最新推荐文章于 2024-04-24 09:44:44 发布

阅读量8.2k

点赞数

分类专栏： web javascript 文章标签： javascript web

本文链接：https://blog.csdn.net/sonikk/article/details/9904271

版权

javascript 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

web

2 篇文章 0 订阅

订阅专栏

一个叫LazyLoad的jQuery插件

官网：

http://www.appelsiini.net/projects/lazyload

非压缩源码(1.8.5)2013-8-11 20:20:42：

https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.js

压缩版本(1.8.5)2013-8-11 20:20:42：

https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.min.js

插件运行demo示例，滚动可见触发图片加载(带渐入动画效果)

http://www.appelsiini.net/projects/lazyload/enabled_fadein.html

带容器的demo，也就是不是window对象的滚动条，而是一个div对象内滚动可见触发图片加载

http://www.appelsiini.net/projects/lazyload/enabled_container.html

延迟加载，也就是实现比如等待5秒后，再加载图片的用法

http://www.appelsiini.net/projects/lazyload/enabled_timeout.html

如果浏览器禁用javascript，则可以通过noscript标签进行兼容处理

http://www.appelsiini.net/projects/lazyload/enabled_noscript.html

通过ajax来加载图片

http://www.appelsiini.net/projects/lazyload/enabled_ajax.html

加载及大量的图片优化(也就是在一个特定的事件(scrollstop)下才进行加载)，原理是，用户在拖动滚轮的时候可能是为了"快进"，为了达到某一个特殊的位置的过渡过程当中，鼠标滚轮一般是不会停下来的(一直按住鼠标左键的状态下)，当停下来后，scrollstop时间会被自动触发(鼠标左键现在仍然在按下的状态当中)，这样就可以更细节地优化图片的加载数量，让不希望加载的图片直接被跳过。应验了一句话：“根据位置来小气地决定是否加载”

http://www.appelsiini.net/projects/lazyload/enabled_gazillion.html

Special scroll events for jQuery

http://james.padolsey.com/javascript/special-scroll-events-for-jquery/

下面贴一段自己写的demo代码：

<!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>图片延迟加载demo by sonikk</title>
	<meta name="generator" content="sonikk demo" />
	<link rel="alternate" type="application/atom+xml" href="http://feeds.feedburner.com/tuupola" title="Atom feed" />
	<style type="text/css">
	.d1
	{
		width:400px;
		height:400px;
		border:1px solid gray;
		overflow:hidden;
	}
	</style>
	<script src="jquery.min.js?v=1.9.1" charset="utf-8"></script>
	<script src="jquery.lazyload.js?v=1.8.5" charset="utf-8"></script>
	<script type="text/javascript" charset="utf-8">
	
		// http://www.appelsiini.net/projects/lazyload
      $(function() {
	  
			//event: "click",
			// 配合timer进行定时加载
			// event: "sporty",
			// 提前多少像素(px)加载
			// threshold : 200,
          $("img.lazy").lazyload({
              effect : "fadeIn"
			  
              /*
              appear : function(elements_left, settings) {
                  console.log("appear");
                  console.log(elements_left);
                  //console.log(this, elements_left, settings);
              },
              load : function(elements_left, settings) {
                  console.log("load");
                  console.log(elements_left);
                  //console.log(this, elements_left, settings);
              }
              */
          });
      });
	  
	/*
	$(window).bind("load", function() { 
		var timeout = setTimeout(function() {$("img.lazy").trigger("sporty")}, 5000);
	});
	*/
	</script>
  
</head>

<body>

	<div class ="d1" >
    <img class="lazy" src="grey.jpg" data-original="http://www.baidu.com" οnerrοr="this.src='http://cdn-img.easyicon.net/png/5332/533283.png';" alt="pic1">
    </div>

	<div class ="d1" >
	<img class="lazy" src="grey.jpg" data-original="http://e.hiphotos.baidu.com/pic/w%3D230/sign=9512c07838dbb6fd255be2253925aba6/b8014a90f603738d6dbf78a1b21bb051f919ecb8.jpg" alt="pic2">
    </div>
	
	<div class ="d1" >
	<img class="lazy" src="grey.jpg" data-original="http://g.hiphotos.baidu.com/album/w%3D2048/sign=1f7c5f8cb90e7bec23da04e11b16b838/dc54564e9258d10995a3e231d058ccbf6d814df4.jpg" alt="pic3">
    </div>
	
	<div class ="d1" >
	<img class="lazy" src="grey.jpg" data-original="http://c.hiphotos.baidu.com/pic/w%3D230/sign=01960ab6a08b87d65042ac1c37092860/91529822720e0cf36540f67c0b46f21fbf09aa86.jpg" alt="pic4">
    </div>
	
	<div class ="d1" >
	<img class="lazy" src="grey.jpg" data-original="http://a.hiphotos.baidu.com/pic/w%3D230/sign=3b10ea2c14ce36d3a20484330af23a24/37d12f2eb9389b502f67f6a48435e5dde6116eaf.jpg" alt="pic5">
    </div>
	
	<div class ="d1" >
	<img class="lazy" src="grey.jpg" data-original="http://b.hiphotos.baidu.com/pic/w%3D230/sign=8f20ef2a3c6d55fbc5c671255d234f40/3b87e950352ac65cb98fe587faf2b21192138ab8.jpg" alt="pic6">  
	</div>

</body>
</html>

lazyload在jQuery上扩展了一个方法叫

function lazyload(options)

{

}

使用方法是：

$("img.lazy").lazyload( { effect : "fadeIn" } );

lazyload对象的结构如下所示：

lazyload

{

var elements = this;

var $container; // 该值如果设置了settings.container就是settings.container 否则是$(window)

var settings;

}

而var settings又包括

{

threshold 提前偏移量

failure_limit 失败限制

event 由哪个事件触发加载

effect 图片下载后通过播放什么动画来展现图像

container 绑定事件的容器

data_attribute存放要加载图像url的自定义属性

skip_invisible是否跳过不可见

appear 当对象出现时可选注册监听函数 (默认null)

load 当对象加载完成事情可选注册监听函数 (默认null)

}

把options的键值对追加到settings成员变量当中

默认是scroll事件会触发appear

如果settings.event当中的事件名称不为"scroll"，则会重新绑定一个事件，并在事件内调用appear函数，执行加载

因此要查看图片是怎么加载的实现方法，就应该顺藤摸瓜来到appear函数内探个究竟。

关键方法是：

$container.scrollTop();

这个可以获取已经滚掉的高度，也就是在显示容器以上未显示的那部分高度。

appear事件的检验条件：

下面的方法判断东西在边界线下方，在下方或刚好相等返回true，否则返回false

   $.belowthefold = function(element, settings) {
        var fold;
        
        if (settings.container === undefined || settings.container === window) {
            fold = $window.height() + $window.scrollTop();
        } else {
            fold = $(settings.container).offset().top + $(settings.container).height();
        }


        return fold <= $(element).offset().top - settings.threshold;
    };

默认触发appear的方式是：同时判断belowthefold和rightoffold为false的的时候触发appear

边界线：从可见到不可见的分割线

fold就是表示在总体容器中滚动条方向边界线的偏移坐标

而如果是$window对象，则滚动条最下面的水平线的高度为：$window.height() + $window.scrollTop()

如果是非$window容器，计算方式则是$(container).height() + $(container).offset().top

类似方法有多个，可以达到定制不同滚动条的效果，非常方便配置

sonikk

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Web图片滚动条加载、延迟加载技术LazyLoad研究

一个叫LazyLoad的jQuery插件官网：http://www.appelsiini.net/projects/lazyload非压缩源码(1.8.5)2013-8-11 20:20:42：https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.js压缩版本(1.8.
复制链接

扫一扫