一聚教程网:一个值得你收藏的教程网站

热门教程

jquery可视区域加载的例子

时间:2022-06-25 17:39:27 编辑:袖梨 来源:一聚教程网


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代码吧!




   
    haorooms前端博客-可视区域加载之 javascript
   


   
   
   
   
   
   
    ps.jpg" src="" >
   
大家注意看我的两个console输出,console.log(imgObj[i].src );获取的是整个浏览器地址!

jquery懒加载之可视区域加载

上面的js用jquery翻译版!

var l=0
//js方法翻译版
$(window).bind("scroll", function(event){

                for(var i=l;i<$("img").length;i++){
                    if($("img").eq(i).offset().top < parseInt($(window).height()) + parseInt($(window).scrollTop())){
                        if($("img").eq(i).attr("src") == ""){
                            var lazyloadsrc=$('img').eq(i).attr("haoroomslazyload");
                            $("img").eq(i).attr("src",lazyloadsrc);
                        }
                    }
                    if($("img").eq(i).offset().top  > parseInt($(window).height()) + parseInt($(window).scrollTop())){
                        l=i;
                        break;
                    }
                }

 });

另外一种方法,

其中是这么写的。

我把这个写法拎了出来,如下:

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


})

可视区域加载延伸

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

$(window).bind("scroll", function(event){

          //窗口的高度+看不见的顶部的高度=屏幕低部距离最顶部的高度 
            var thisButtomTop = parseInt($(window).height()) + parseInt($(window).scrollTop()); 
            var thisTop = parseInt($(window).scrollTop()); //屏幕顶部距离最顶部的高度 
                var PictureTop = parseInt($("你的要滚动加载的ID").offset().top); 
                 if (PictureTop >= thisTop && PictureTop <= thisButtomTop) {
                  //  $("#你的要滚动加载的ID").attr("src", $("#你的要滚动加载的ID").attr("haoroomslazyload"));

                   //此处可以执行你的加载函数,加载函数由原来的document.ready中,移到这里来!

 

                 }
})

热门栏目