手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表Tag:inviewport

jQuery inViewport

做前端的用户都会想过如何做lazyLoad,其实很多时候都有很多想法,比如占位图片,TEXTAREA后处理,根据滚动条的位置显示图片等。
介绍介绍上面的说法,因为这些名词是我自己想出来的。。。和一些标准的前端讲法可能是不一致的。
1、占位图片,这个用的比较多一点,即在页面还没有全部加载完的时候,涉及到图片的地方,先用占位图片(1X1大小的图片进行放大)占好,不影响整个DOM的加载,等全部加载完后,再慢慢加载图片。这样的方式优点在于,不影响DOM加载,代码修改量也最小,缺点是,其实还是加载了所有的图片。。。
2、teatarea后处理,这个,被用的比较明显的应该算是淘宝的trademark的页面上,当时在抢购活动的时候就用上了这个技巧,trademark这个页面全是图片,如果全部读出来并显示,很可能一下子就下载大约3M左右的图片,如果用第一种办法,那么占用的流量就非常夸张。于是淘宝当时的页面源码里就很明显的内容就是第一屏是正常的HTML代码,第二屏开始,把每一层的内容都放在textarea容器里。当滚动条滚动的时候,即当textarea开始出现在页面中时,就把textarea中的HTML代码转化成DOM,显示在页面上。它的优点是,textarea中的内容在初次加载时,不会被当成DOM被页面所加载。因此事实上首次加载的时候,只有第一屏的内容。缺点是需要写很多JS。(和第三点也有关)
3、根据滚动条的位置显示图片,这个其实是现在很多网站采用的技巧了,即滚动条滚动到哪里,图片就开始加载到哪里。和第二点其实有点象,只是处理的结构不一样而已。
介绍完这个,那就好好介绍一下第三点的技术了,原文从这里来:http://www.zhangjingwei.com/archives/jquery-inviewport/。

晚上在微博上“拔赤”写了个lazyload插件,发现其中用到一个很有意思的方法”div.inViewportRegion()”,字面意思就是在可视区域内。

在网上找了找,发现这是YUI提供的一个组件,觉得很有意思。
http://gillserver.com/yui/api/dom-region.js.html

如果jQ里面也包含类似的方法,可以做很多事,于是GG了一下,发现国外的同学写过这种选择器,代码表现上更直观。

代码如下:

JavaScript代码
  1. (function($) {  
  2.    
  3.     $.belowthefold = function(element, settings) {  
  4.         var fold = $(window).height() + $(window).scrollTop();  
  5.         return fold < = $(element).offset().top - settings.threshold;  
  6.     };  
  7.    
  8.     $.abovethetop = function(element, settings) {  
  9.         var top = $(window).scrollTop();  
  10.         return top >= $(element).offset().top + $(element).height() - settings.threshold;  
  11.     };  
  12.    
  13.     $.rightofscreen = function(element, settings) {  
  14.         var fold = $(window).width() + $(window).scrollLeft();  
  15.         return fold < = $(element).offset().left - settings.threshold;  
  16.     };  
  17.    
  18.     $.leftofscreen = function(element, settings) {  
  19.         var left = $(window).scrollLeft();  
  20.         return left >= $(element).offset().left + $(element).width() - settings.threshold;  
  21.     };  
  22.    
  23.     $.inviewport = function(element, settings) {  
  24.         return !$.rightofscreen(element, settings) && !$.leftofscreen(element, settings) && !$.belowthefold(element, settings) && !$.abovethetop(element, settings);  
  25.     };  
  26.    
  27.     $.extend($.expr[':'], {  
  28.         "below-the-fold"function(a, i, m) {  
  29.             return $.belowthefold(a, {threshold : 0});  
  30.         },  
  31.         "above-the-top"function(a, i, m) {  
  32.             return $.abovethetop(a, {threshold : 0});  
  33.         },  
  34.         "left-of-screen"function(a, i, m) {  
  35.             return $.leftofscreen(a, {threshold : 0});  
  36.         },  
  37.         "right-of-screen"function(a, i, m) {  
  38.             return $.rightofscreen(a, {threshold : 0});  
  39.         },  
  40.         "in-viewport"function(a, i, m) {  
  41.             return $.inviewport(a, {threshold : 0});  
  42.         }  
  43.     });  
  44.    
  45. })(jQuery);  

来源:http://www.appelsiini.net/projects/viewport

简单测了下,不错,呵呵~

Demo:http://www.zhangjingwei.com/inviewport.zip

------EOF--
事后测试了一下,加载了这段的JS后,剩下对代码的处理就其实不多了,只需要BIND一个in-viewport就OK了,也算是比较方便。值得推荐,不知道啥时候类似功能可以直接进jQuery类库

Tags: jquery, inviewport, lazyload