鼠标滚动到某屏加载那一屏的数据，实现懒加载

最新推荐文章于 2021-10-13 11:20:18 发布

weixin_30951743

最新推荐文章于 2021-10-13 11:20:18 发布

阅读量160

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/hhwww/p/10857410.html

版权

1、用于商城的楼层内容异步加载，滚动条滚动时才加载数据
2、如果当前屏幕上显示了好几个楼层，那么同时执行这几个楼层的异步加载
3、如果滚动条在页面中间，此时刷新页面，刷新成功后，执行当前显示在屏幕上的几个楼层的异步加载，未显示的不加载
4、如果滚动条在页面下面，此时刷新页面，刷新成功后，执行当前显示在屏幕上的几个楼层的异步加载，滚动条向上滚动时才加载上面的楼层

直接上代码：

/**************************start* 懒加载方法(当元素进入在界面中显示触发回调函数)*************************************/

/**
 * 按数组格式传入
 * @param LazyLoadData 要传入的数据  doc:元素节点；state:是否需要懒加载 false需要懒加载 callback: 回调函数
 *传入格式:
 *  [{"doc":".header","state": false,"callback": function(){alert(1)}},
     {"doc":".yb_louceng_1","state": false,"callback":function(){alert(2)}}]
 * @return
 */
function arrayLazyLoad(LazyLoadData){
    
    var yb_getScrollTop        =    getScrollTop(),        //滚动条在Y轴上的滚动距离
         yb_getWindowHeight    =    getWindowHeight(),   //浏览器窗口高度
         yb_chufa_zuixiao_y    =    yb_getScrollTop,   //触发的最小y值
         yb_chufa_zuida_y    =    yb_getScrollTop+yb_getWindowHeight;    //触发的最大y值
       
    //循环判断
    for(var i=0;i<LazyLoadData.length;i++){
        
        var yb_doc_start = $(LazyLoadData[i]["doc"]).offset().top,
            yb_doc_end = yb_doc_start + $(LazyLoadData[i]["doc"]).height();
       
        var yb_panduan_a    =    yb_chufa_zuixiao_y>=yb_doc_start && yb_chufa_zuixiao_y<=yb_doc_end,
            yb_panduan_b    =    yb_chufa_zuida_y>=yb_doc_start && yb_chufa_zuida_y<=yb_doc_end,
            yb_panduan_c    =    yb_chufa_zuixiao_y<=yb_doc_start && yb_chufa_zuida_y>=yb_doc_end;
            
        if((yb_panduan_a || yb_panduan_b || yb_panduan_c) && LazyLoadData[i]["state"]==false){
            LazyLoadData[i]["state"]    =    true;
            console.log("正在加载第"+i+"个楼层");
            if(typeof callback === "function"){
                LazyLoadData[i]["callback"]();
            }
        }
        
    }   
}

/**
 * 单个元素传入;
 * @param objId     元素ID
 * @param callback    回调函数
 * @return
 */
function lazyLoad(objId,callback){
    //检测callback参数是否为函数
    if(typeof callback === "function"){
        
        //生成滚轮监听触发事件
        var onScroll = function(){
            
            var $obj = $("#"+objId);
            
            var objTop = $obj.offset().top;
            var objBot = objTop + $obj.height();
            
            var scrollTop = getScrollTop();
            var scrollBot = scrollTop + getWindowHeight();
            
            //判断元素是否在用户视野内,如果是则触发回调函数,移除监听防止回调函数重复触发
            if(objTop <= scrollBot && objBot >= scrollTop){
                $(window).off("scroll", onScroll);
                callback();
            }
            
        }
        
        //开启滚轮监听
        $(window).on("scroll", onScroll);
        $(window).scroll();
        
    }
    
}
/**************************end** 懒加载方法(当元素进入在界面中显示触发回调函数)*************************************/

//滚动条在Y轴上的滚动距离
function getScrollTop(){
　　var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
　　if(document.body){
　　　　bodyScrollTop = document.body.scrollTop;
　　}
　　if(document.documentElement){
　　　　documentScrollTop = document.documentElement.scrollTop;
　　}
　　scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
　　return scrollTop;
}

//浏览器视口的高度
function getWindowHeight(){
　　var windowHeight = 0;
　　if(document.compatMode == "CSS1Compat"){
　　　　windowHeight = document.documentElement.clientHeight;
　　}else{
　　　　windowHeight = document.body.clientHeight;
　　}
　　return windowHeight;
}

可以封装到一个js文件，当作工具类库使用。

测试：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
        <script type="text/javascript" src=/scripts/jquery-1.8.3.min.js"></script>
        <script type="text/javascript" src="/scripts/common.js"></script>
         
        <style>
            *{margin:0px;padding:0px;}
            .header{
                height: 300px;
                background-color: #0C3;
            }
            .yb_louceng_1{
                background-color: #03F;
                height: 320px;
            }
            .yb_louceng_2{
                background-color: #F33;
                height: 250px;
            }
            .yb_louceng_3{
                background-color: #03F;
                height: 340px;
                color: #093;
            }
            .yb_louceng_4{
                background-color: #F0F;
            }
        </style>
        <script type="text/javascript">

        $(function(){
            var LazyLoadData  =[{"doc":".header","state": false,"callback": function(){console.log(1)}},
                                 {"doc":".yb_louceng_1","state": false,"callback":function(){console.log(2)}},
                                  {"doc":".yb_louceng_2","state": false,"callback" : function(){console.log(3)}},
                                   {"doc":".yb_louceng_3","state": false,"callback" : function(){console.log(4)}},
                                {"doc":".yb_louceng_4","state": false,"callback" : function(){console.log(5)}}];
                arrayLazyLoad(LazyLoadData);

           $(window).scroll(function(){
              arrayLazyLoad(LazyLoadData);
           });

 }); </script> </head> <body class="bodycolor" topmargin="5"> <div class="header" id="header">头部内容</div> <div class="yb_louceng_1" id="yb_louceng_1">楼层1内容</div> <div class="yb_louceng_2" id="yb_louceng_2">楼层2内容</div> <div class="yb_louceng_3" id="yb_louceng_3">楼层3内容</div> <div class="yb_louceng_4" id="yb_louceng_4"> 楼层4内容<br/> sd </div> </body> </html>

转载于:https://www.cnblogs.com/hhwww/p/10857410.html

weixin_30951743

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
鼠标滚动到某屏加载那一屏的数据，实现懒加载

1、用于商城的楼层内容异步加载，滚动条滚动时才加载数据2、如果当前屏幕上显示了好几个楼层，那么同时执行这几个楼层的异步加载3、如果滚动条在页面中间，此时刷新页面，刷新成功后，执行当前显示在屏幕上的几个楼层的异步加载，未显示的不加载4、如果滚动条在页面下面，此时刷新页面，刷新成功后，执行当前显示在屏幕上的几个楼层的异步加载，滚动条向上滚动时才加载上面的楼层直接上代码：...
复制链接

扫一扫