zoukankan      html  css  js  c++  java
  • js 鼠标滚动到某屏时,加载那一屏的数据,仿京东首页楼层异步加载模式

    js用处:在做商城时,首页图片太多,严重影响首页打开速度,所以我们需要用到异步加载楼层。
    js名称:鼠标滚动到某屏时,加载那一屏的数据,仿京东首页楼层模式
    js解释:1、用于商城的楼层内容异步加载,滚动条滚动时才加载数据
              2、如果当前屏幕上显示了好几个楼层,那么同时执行这几个楼层的异步加载
              3、如果滚动条在页面中间,此时刷新页面,刷新成功后,执行当前显示在屏幕上的几个楼层的异步加载,未显示的不加载
              4、如果滚动条在页面下面,此时刷新页面,刷新成功后,执行当前显示在屏幕上的几个楼层的异步加载,滚动条向上滚动时才加载上面的楼层

    下面上代码:

    一、CSS

    *{margin:0px;padding:0px;}
    body{height:10000px;}
    .header{
        height: 1000px;
        background-color: #0C3;
    }
    .yb_louceng_1{
        background-color: #03F;
        height: 640px;
    }
    .yb_louceng_2{
        background-color: #F33;
        height: 640px;
    }
    .yb_louceng_3{
        background-color: #03F;
        height: 640px;
        color: #093;
    }
    .yb_louceng_4{
        background-color: #F0F;
        height: 640px;
    }

    二、js

    /**
     * js用处:在做商城时,首页图片太多,严重影响首页打开速度,所以我们需要用到异步加载楼层。
     * js名称:鼠标滚动到某屏时,加载那一屏的数据,仿京东首页楼层模式
       js解释:1、用于商城的楼层内容异步加载,滚动条滚动时才加载数据
              2、如果当前屏幕上显示了好几个楼层,那么同时执行这几个楼层的异步加载
              3、如果滚动条在页面中间,此时刷新页面,刷新成功后,执行当前显示在屏幕上的几个楼层的异步加载,未显示的不加载
              4、如果滚动条在页面下面,此时刷新页面,刷新成功后,执行当前显示在屏幕上的几个楼层的异步加载,滚动条向上滚动时才加载上面的楼层
     * 注意:请引入jquery  如果效果实现不了,请检查版本为1.8.3
     * 作者:yb
     * 网址:http://www.cnblogs.com/phpyangbo/
     * 
     */
    
    $(function(){
        //载入页面时执行加载
        yb_louceng_panduan();
        //浏览器滚动时执行加载
        $(window).scroll(function(){
            yb_louceng_panduan();
            
        });
    });
    
    //楼层位置数组    
    var yb_louceng_weizhi            =    new Array();
    
    yb_louceng_weizhi[0]            =    new Array();
    yb_louceng_weizhi[0]["start"]    =    0;
    yb_louceng_weizhi[0]["end"]        =    1000;
    yb_louceng_weizhi[0]["state"]    =    false;
    yb_louceng_weizhi[1]            =    new Array();
    yb_louceng_weizhi[1]["start"]    =    1000;
    yb_louceng_weizhi[1]["end"]        =    1640;
    yb_louceng_weizhi[1]["state"]    =    false;
    yb_louceng_weizhi[2]            =    new Array();
    yb_louceng_weizhi[2]["start"]    =    1640;
    yb_louceng_weizhi[2]["end"]        =    2280;
    yb_louceng_weizhi[2]["state"]    =    false;
    yb_louceng_weizhi[3]            =    new Array();
    yb_louceng_weizhi[3]["start"]    =    2280;
    yb_louceng_weizhi[3]["end"]        =    2920;
    yb_louceng_weizhi[3]["state"]    =    false;
    yb_louceng_weizhi[4]            =    new Array();
    yb_louceng_weizhi[4]["start"]    =    2920;
    yb_louceng_weizhi[4]["end"]        =    3560;
    yb_louceng_weizhi[4]["state"]    =    false;
    
    
    //楼层判断执行函数
    function yb_louceng_panduan(){
        var yb_getScrollTop        =    getScrollTop();        //滚动条在Y轴上的滚动距离
        var yb_getWindowHeight    =    getWindowHeight();    //浏览器窗口高度
        var yb_chufa_zuixiao_y    =    yb_getScrollTop;    //触发的最小y值
        var yb_chufa_zuida_y    =    yb_getScrollTop+yb_getWindowHeight;    //触发的最大y值
            
        //循环判断
        for(var i=0;i<yb_louceng_weizhi.length;i++){
                
            var yb_panduan_left_1    =    yb_chufa_zuixiao_y>=yb_louceng_weizhi[i]["start"] && yb_chufa_zuixiao_y<=yb_louceng_weizhi[i]["end"];
            var yb_panduan_left_2    =    yb_chufa_zuida_y>=yb_louceng_weizhi[i]["start"] && yb_chufa_zuida_y<=yb_louceng_weizhi[i]["end"];
            var yb_panduan_left_3    =    yb_chufa_zuixiao_y<=yb_louceng_weizhi[i]["start"] && yb_chufa_zuida_y>=yb_louceng_weizhi[i]["end"];
                
            if((yb_panduan_left_1 || yb_panduan_left_2 || yb_panduan_left_3) && yb_louceng_weizhi[i]["state"]==false){
                //改变楼层状态
                yb_louceng_weizhi[i]["state"]    =    true;
                alert("正在加载第"+i+"个楼层");
                //在此处构建ajax请求楼层数据
                //处理异步数据的逻辑结构开始
                //=================================
                
                
                
                //=================================
                //处理异步数据的逻辑机构完
            }
        }    
    }
    
    
    
    
    //滚动条在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 getScrollHeight(){
      var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
      if(document.body){
        bodyScrollHeight = document.body.scrollHeight;
      }
      if(document.documentElement){
        documentScrollHeight = document.documentElement.scrollHeight;
      }
      scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
      return scrollHeight;
    }
    
    //浏览器视口的高度
    function getWindowHeight(){
      var windowHeight = 0;
      if(document.compatMode == "CSS1Compat"){
        windowHeight = document.documentElement.clientHeight;
      }else{
        windowHeight = document.body.clientHeight;
      }
      return windowHeight;
    }


    三、HTML

    <div class="header">头部内容</div>
    
    <div class="yb_louceng_1">楼层1内容</div>
    <div class="yb_louceng_2">楼层2内容</div>
    <div class="yb_louceng_3">楼层3内容</div>
    <div class="yb_louceng_4">楼层4内容</div>
  • 相关阅读:
    Best Time to Buy and Sell Stock
    Remove Nth Node From End of List
    Unique Paths
    Swap Nodes in Pairs
    Convert Sorted Array to Binary Search Tree
    Populating Next Right Pointers in Each Node
    Maximum Subarray
    Climbing Stairs
    Unique Binary Search Trees
    Remove Duplicates from Sorted Array
  • 原文地址:https://www.cnblogs.com/phpyangbo/p/6039678.html
Copyright © 2011-2022 走看看