js和jquery懒加载之可视区域加载

35621次浏览

javascript懒加载之可视区域加载

在制作js可视区域加载之前,我们首先必须了解各种高度,我之前的一篇文章javascript的height总结,大家可以看一下,复习一下!

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>haorooms前端博客-可视区域加载之 javascript</title>
    <style>
    img{width:100%;margin-bottom: 30px; min-height: 400px; background-color: #ddd;}

    </style>
</head>
<body>
    <img haoroomslazyload="Chrysanthemum.jpg" src="" >
    <img haoroomslazyload="Desert.jpg" src="" >
    <img haoroomslazyload="Hydrangeas.jpg" src="" >
    <img haoroomslazyload="Koala.jpg" src="" >
    <img haoroomslazyload="Lighthouse.jpg" src="" >
    <img haoroomslazyload="Penguins.jpg" src="" >
    <img haoroomslazyload="Tulips.jpg" src="" >
    <script>
    var imgNum=document.getElementsByTagName('img').length;
    var imgObj=document.getElementsByTagName("img");
    var l=0;

        window.onscroll=function(){
                var seeHeight = document.documentElement.clientHeight;
                var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                for(var i=l;i<imgNum;i++){
                    if(imgObj[i].offsetTop < seeHeight + scrollTop){
                        console.log(imgObj[i].getAttribute("src"));
                        console.log(imgObj[i].src );
                        if(imgObj[i].getAttribute("src") == ""){
                            imgObj[i].src = imgObj[i].getAttribute("haoroomslazyload");
                        }
                    }
                    if(imgObj[i].offsetTop > seeHeight + scrollTop){
                        l=i;
                        break;
                    }
                }
        }

</script>

大家注意看我的两个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;
                    }
                }

 });

另外一种方法,可以参考我之前写的一个延迟加载的插件:http://www.haorooms.com/post/touchweb_canvas_lazyload

其中是这么写的。

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

$(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中,移到这里来!



                 }
})

js方案-可视区域判断

function getElementTop(element){
    var actualTop = element.offsetTop;
    var current = element.offsetParent;
    while (current !== null){
        actualTop += current. offsetTop;
        current = current.offsetParent;
    }
    return actualTop;
}

function isInViewPortOfOne (el) {
    // viewPortHeight 兼容所有浏览器写法
    const viewPortHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight 
    const offsetTop = el.offsetTop // 有相对定位,不准,可以用如 getElementTop(el)
    const scrollTop = document.documentElement.scrollTop
    const top = offsetTop - scrollTop
    console.log('top', top)
    return top <= viewPortHeight 
}

补充

可视区域加载可以用javascript新的属性getBoundingClientRect()制作,简单很多。关于getBoundingClientRect的API请看

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect

getBoundingClientRect 可视区域 代码如下:

function isInViewPortOfTwo (el) {
    const viewPortHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight 
    const top = el.getBoundingClientRect() && el.getBoundingClientRect().top
    console.log('top', top)
    return top  <= viewPortHeight 
}

补充IntersectionObserver

请看文章:https://www.haorooms.com/post/intersectionobserver

Tags: jsjquery懒加载

相关文章: