zoukankan      html  css  js  c++  java

  • scroll_read通过Ajax加载新内容，写法比较二

    废话不多说，直接上代码

    index.html 

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     2         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     3 <html xmlns="http://www.w3.org/1999/xhtml">
     4 <head>
     5     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     6     <title>Ajax_scroll</title>
     7     <link type="text/css" href="css/index.css" rel="stylesheet"/>
     8     <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
     9     <script type="text/javascript" src="js/index.js"></script>
    10 </head>
    11 <body>
    12 <div id="wrapper" class="wrapper">
    13     <div class="content-form"></div>
    14     <div id="loading"><span></span>加载中...</div>
    15 </div>
    16 </body>
    17 </html> 

    index.js

     1 //定义一个全局变量
     2 var scr_a;
     3 //var scr_b;
     4 //页面响应时加载
     5 $.ajax({
     6     url:"input_form.html",
     7     cache:false,
     8     success:function (html) {
     9         $(".content-form").append(html);
    10         //这里scrollHeight = offsetHeight,所以忙活了一个中午取值都不对
    11         //scr_a = document.getElementById("wrapper").scrollHeight;
    12         //console.log(scr_a);
    13         scr_a = document.documentElement.offsetHeight - document.documentElement.clientHeight - 1;
    14         //console.log(scr_a);
    15     }
    16 });
    17 //scroll ready
    18 var hasShow = false;
    19 $(window).bind("scroll", function () {
    20     if (hasShow) {
    21         $(window).unbind("scroll");
    22         return;
    23     }
    24     //Ajax请求开始显示
    25     $("#loading").ajaxStart(function () {
    26         $(this).show();
    27     });
    28     var t = $(document).scrollTop();
    29     //console.log(t);
    30     if (t > scr_a) {
    31         hasShow = true;
    32         //延迟2秒加载测试Ajax效果
    33         setTimeout(function () {
    34             $.ajax({
    35                 url:"input_form.html",
    36                 cache:false,
    37                 success:function (html) {
    38                     $(".content-form").append(html);
    39                     //scr_b = document.documentElement.offsetHeight - document.documentElement.clientHeight - 1;
    40                     //console.log(scr_b);
    41                 }
    42             });
    43         }, 2000);
    44     }
    45     //Ajax请求结束隐藏
    46     $("#loading").ajaxStop(function () {
    47         $(this).hide();
    48     });
    49 });

    index.css

     1 html {
     2     color: #000;
     3     background: #FFF;
     4     font: 12px/1.5 \5b8b\4f53, tahoma, arial
     5 }
     6 
     7 body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
     8     margin: 0;
     9     padding: 0
    10 }
    11 
    12 table {
    13     border-collapse: collapse;
    14     border-spacing: 0
    15 }
    16 
    17 fieldset, img {
    18     border: 0
    19 }
    20 
    21 address, caption, cite, code, dfn, em, strong, th, var {
    22     font-style: normal;
    23     font-weight: normal
    24 }
    25 
    26 ol, ul {
    27     list-style: none
    28 }
    29 
    30 caption, th {
    31     text-align: left
    32 }
    33 
    34 h1, h2, h3, h4, h5, h6 {
    35     font-size: 100%;
    36     font-weight: normal
    37 }
    38 
    39 q:before, q:after {
    40     content: ''
    41 }
    42 
    43 abbr, acronym {
    44     border: 0;
    45     font-variant: normal
    46 }
    47 
    48 sup {
    49     vertical-align: text-top
    50 }
    51 
    52 sub {
    53     vertical-align: text-bottom
    54 }
    55 
    56 input, textarea, select {
    57     font-family: inherit;
    58     font-size: inherit;
    59     font-weight: inherit
    60 }
    61 
    62 input, textarea, select {
    63     *font-size: 100%;
    64 }
    65 
    66 legend {
    67     color: #000
    68 }
    69 
    70 .wrapper {
    71     width: 950px;
    72     margin: 0 auto;
    73     padding: 0
    74 }
    75 
    76 .content-form {
    77     margin: 9px 0;
    78     float: left;
    79     line-height: 26px
    80 }
    81 
    82 #loading {
    83     margin: 0 auto;
    84     text-align: center;
    85     width: 80px;
    86 }
    87 
    88 #loading span {
    89     background: url("../img/indicator.gif") no-repeat;
    90     float: left;
    91     width: 16px;
    92     height: 16px;
    93 } 

    /Files/qzsonline/Ajax_scroll.rar 
  • 相关阅读:
    css gridlayout
    css position 属性
    简单的登陆界面
    introduce
    Event flow
    constructor和object的区别
    10th week (1)
    编程语言的历史和发展
    正则表达式的验证匹配
    js正则替换
  • 原文地址：https://www.cnblogs.com/qzsonline/p/2332116.html
Copyright © 2011-2022 走看看