JavaScript和jQuery懒加载之可视区域加载

最新推荐文章于 2020-12-06 18:53:25 发布

u013063153

最新推荐文章于 2020-12-06 18:53:25 发布

阅读量2.5k

点赞数

分类专栏： JavaScript 大前端

JavaScript 同时被 2 个专栏收录

82 篇文章 0 订阅

订阅专栏

大前端

65 篇文章 1 订阅

订阅专栏

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中，移到这里来！
        
    }
})

原文地址：http://www.haorooms.com/post/js_jquery_lazyload_viewload

u013063153

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript和jQuery懒加载之可视区域加载

JavaScript懒加载之可视区域加载在制作js可视区域加载之前，我们首先必须了解各种高度，我之前的一篇文章javascript的height总结，大家可以看一下，复习一下！了解了各种高度之后，我们开始我们的js代码吧！html>html lang="en">head> meta charset="UTF-8"> title>haorooms前端博
复制链接

扫一扫