夏日博客

A-A+

jquery可视区域加载的例子

2016年01月11日 前端设计 暂无评论 阅读 6 views 次

可视区域加载功能可以通过js判断高度来实现也可以使用jquery延时加载插件来实现了效果也是一样了，下面我们一起来看看这个例子如何实用。

javascript懒加载之可视区域加载

在制作js可视区域加载之前，我们首先必须了解各种高度，我之前的一篇文章javascript的height总结

jquery的各种高度

首先来说一说$(document)和$(window)，如下：

$(document).height();//整个网页的高度

$(window).height();//浏览器可视窗口的高度

$(window).scrollTop();//浏览器可视窗口顶端距离网页顶端的高度（垂直偏移）

用一句话理解就是：当网页滚动条拉到最低端时，

$(document).height() == $(window).height() + $(window).scrollTop()。

注意，是拉到最低端！

当网页高度不足浏览器窗口时$(document).height()返回的是$(window).height()

假如您要获取整个网页的高度，不建议用$("html").height()、$("body").height()的高度，

原因:

$("body").height()：body可能会有边框，获取的高度会比$(document).height()小； $("html").height()：在不同的浏览器上获取的高度的意义会有差异，说白了就是浏览器不兼容。

说到这里，提及边框和margin还有padding，我们自然想到了jquery的另外的两个高度，那就是innerHeight()和outerHeight()

innerHeight()和outerHeight()不适用于window 和 document对象，对于window 和 document对象可以使用.height()代替。innerHeight()和outerHeight()主要用来获取标签的高度。

innerHeight()

enter image description here

innerHeight:高度＋补白

outerHeight:高度＋补白＋边框，参数为true时：高度＋补白＋边框＋边距

innerHeight(value)

这个“value”参数可以是一个字符串（数字加单位）或者是一个数字,如果这个“value”参数只提供一个数字，jQuery会自动加上像素单位（px）。如果只提供一个字符串，任何有效的CSS尺寸都可以为高度赋值（就像100px, 50%, 或者 auto）。注意在现代浏览器中，CSS高度属性不包含padding, border, 或者 margin， 除非box-sizingCSS属性被应用。

javascript的各种高度:

网页可见区域宽:document.body.clientWidth

网页可见区域高:document.body.clientHeight

网页可见区域宽:document.body.offsetWidth (包括边线的宽)

网页可见区域高:document.body.offsetHeight (包括边线的高)

网页正文全文宽:document.body.scrollWidth

网页正文全文高:document.body.scrollHeight

网页被卷去的高:document.body.scrollTop

网页被卷去的左:document.body.scrollLeft

网页正文部分上:window.screenTop

网页正文部分左:window.screenLeft

屏幕分辨率的高:window.screen.height

屏幕分辨率的宽:window.screen.width

屏幕可用工作区高度： window.screen.availHeight

屏幕可用工作区宽度： window.screen.availWidth

了解了各种高度之后,我们开始我们的js代码吧！

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>haorooms前端博客-可视区域加载之 javascript</title>  
  6.     <style>  
  7.     img{width:100%;margin-bottom: 30px; min-height: 400px; background-color: #ddd;}  
  8.     </style>  
  9. </head>  
  10. <body>  
  11.     <img haoroomslazyload="Chrysanthemum.jpg" src="" >  
  12.     <img haoroomslazyload="Desert.jpg" src="" >  
  13.     <img haoroomslazyload="Hydrangeas.jpg" src="" >  
  14.     <img haoroomslazyload="Koala.jpg" src="" >  
  15.     <img haoroomslazyload="Lighthouse.jpg" src="" >  
  16.     <img haoroomslazyload="Penguins.jpg" src="" >  
  17.     <img haoroomslazyload="Tulips.jpg" src="" >  
  18.     <script>  
  19.     var imgNum=document.getElementsByTagName('img').length;  
  20.     var imgObj=document.getElementsByTagName("img");  
  21.     var l=0;  
  22.         window.onscroll=function(){  
  23.                 var seeHeight = document.documentElement.clientHeight;  
  24.                 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;  
  25.                 for(var i=l;i<imgNum;i++){  
  26.                     if(imgObj[i].offsetTop < seeHeight + scrollTop){  
  27.                         console.log(imgObj[i].getAttribute("src"));  
  28.                         console.log(imgObj[i].src );  
  29.                         if(imgObj[i].getAttribute("src") == ""){  
  30.                             imgObj[i].src = imgObj[i].getAttribute("haoroomslazyload");  
  31.                         }  
  32.                     }  
  33.                     if(imgObj[i].offsetTop > seeHeight + scrollTop){  
  34.                         l=i;  
  35.                         break;  
  36.                     }  
  37.                 }  
  38.         }  
  39. </script>  

大家注意看我的两个console输出，console.log(imgObj[i].src );获取的是整个浏览器地址！

jquery懒加载之可视区域加载

上面的js用jquery翻译版！

  1. var l=0  
  2. //js方法翻译版  
  3. $(window).bind("scroll", function(event){  
  4.                 for(var i=l;i<$("img").length;i++){  
  5.                     if($("img").eq(i).offset().top < parseInt($(window).height()) + parseInt($(window).scrollTop())){  
  6.                         if($("img").eq(i).attr("src") == ""){  
  7.                             var lazyloadsrc=$('img').eq(i).attr("haoroomslazyload");  
  8.                             $("img").eq(i).attr("src",lazyloadsrc);  
  9.                         }  
  10.                     }  
  11.                     if($("img").eq(i).offset().top  > parseInt($(window).height()) + parseInt($(window).scrollTop())){  
  12.                         l=i;  
  13.                         break;  
  14.                     }  
  15.                 }  
  16.  });  

另外一种方法，其中是这么写的,我把这个写法拎了出来，如下：

  1. $(window).bind("scroll", function(event){  
  2. $("img").each(function(){  
  3.           //窗口的高度+看不见的顶部的高度=屏幕低部距离最顶部的高度    
  4.             var thisButtomTop = parseInt($(window).height()) + parseInt($(window).scrollTop());    
  5.             var thisTop = parseInt($(window).scrollTop()); //屏幕顶部距离最顶部的高度    
  6.                 var PictureTop = parseInt($(this).offset().top);    
  7.                  if (PictureTop >= thisTop && PictureTop <= thisButtomTop && $(this).attr("haoroomslazyload") != $(this).attr("src")) {  
  8.                    $(this).attr("src", $(this).attr("haoroomslazyload"));   
  9.                  }  
  10. });  
  11.   
  12. })  

可视区域加载延伸,例如一个动画效果，或者一个canvas图片，我想达到的效果是，初始进来不加载，当滚动到这个动画或者图表上面的时候，进行加载，那么我们就可以根据上面的代码进行如下改进：

  1. $(window).bind("scroll", function(event){  
  2.           //窗口的高度+看不见的顶部的高度=屏幕低部距离最顶部的高度    
  3.             var thisButtomTop = parseInt($(window).height()) + parseInt($(window).scrollTop());    
  4.             var thisTop = parseInt($(window).scrollTop()); //屏幕顶部距离最顶部的高度    
  5.                 var PictureTop = parseInt($("你的要滚动加载的ID").offset().top);    
  6.                  if (PictureTop >= thisTop && PictureTop <= thisButtomTop) {  
  7.                   //  $("#你的要滚动加载的ID").attr("src", $("#你的要滚动加载的ID").attr("haoroomslazyload"));  
  8.                    //此处可以执行你的加载函数，加载函数由原来的document.ready中，移到这里来！  
  9.    
  10.                  }  
  11. })  
标签：

给我留言