jQuery implémente l'effet de défilement infini code_jquery

L'exemple de cet article décrit comment jQuery peut obtenir un effet de défilement infini. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

C’est un effet imitant les maigres résultats de Tencent. La barre de défilement peut défiler à l'infini hors ligne et obtenir en continu de nouvelles données de la base de données sans brossage.

<style type="text/css">
body{ font-family: "Trebuchet MS",verdana,arial;}
#loading{ display:none; font-weight:bold;color:#FF0000;}
p { padding:10px;}
</style>
<p id="loading">loading data... </p>
$(function(){
   var isOK=true;//记录上次访问是否已经结束，如果ajax也有线程就好了
   var scrollH=0;//判断是往上滚还是往下滚
   var intI=1;
  // loading层是固定在页脚的记录牌
   $(".loading").css({"right":"2","bottom":0});
   $(".loading")
   .ajaxStart(function(){
    isOK=false;//执行ajax的时候把isOK设置成false防止第一次没有执行完的情况下执行第二次易出错
    $("#loading2").show();
     })
   .ajaxStop(function(){
     isOK=true;
     $("#loading2").hide();
     })
  $(window).scroll(function(){
   //控制load层
   document.getElementByIdx_x_x("loading").style.top=document.documentElement.scrollTop+"px";
    //触法ajax条件 可以换算成百分比更好
  if($(document).height()-$(window).scrollTop()-document.documentElement.clientHeight<240）{
   //当前位置比上次的小就是往上滚动不要执行ajax代码块
   if(scrollH>document.documentElement.scrollTopY)
   {
    $(".loading").append("<br/>向上滚不执行")
    scrollH=document.documentElement.scrollTop;//记录新位置
    return;
    }
   if(isOK)//如果是第一次或者上次执行完成了就执行本次
   {
     scrollH=document.documentElement.scrollTop;//记录新位置
     $(".loading").append("<br/>~~<span style='background:#red'>执行了ajax。。。。。</span><br/>")
     isOK=false;
   $.ajax({
     type:"POST",
     dataType: 'xml',
     url:"http://localhost:49302/MY100/2010/WebService1.asmx/getDS",
     error:function(e){
      $(".main").append('发生了错误：'+e)
      },
     success:function(data){
      try{
      $(data).find("Table").each(function(i){
         $(".main").append("结果："+$(this).children('txtTitle').text()+"<br/>");
         $(".main").append("结果："+$(this).children('txtBody1').text()+"<br/>");
         $(".main").append("结果："+$(this).children('txtBody2').text()+"<br/>");
         $(".main").append("结果："+$(this).children('txtBody3').text()+"<br/>");
         $(".main").append("结果："+$(this).children('txtBody4').text()+"<br/>");
         $(".main").append("结果："+$(this).children('ID').text()+"<br/>");
         })//each
      }
      catch(e){
       $(".main").append("<p>"+e+"</p>")
      }
      }//success
     })//ajax
     }//if(isOK)
     else
     {
      $(".loading").append("<br/>~~你是向下滚了，但是上次还没有执行完毕，等等吧<br/>")
     }
   }// 触法ajax条件
   })//scroll
})//Jquery 结束处

Les lecteurs intéressés par davantage de contenu lié à jQuery peuvent consulter les sujets spéciaux sur ce site : "Résumé des effets et techniques de commutation JQuery", "Résumé des effets et techniques de glisser jQuery ", "Résumé des compétences de l'extension JQuery", "Résumé des effets spéciaux classiques communs de jQuery", "Résumé de l'utilisation des animations et des effets spéciaux jQuery", " Résumé de l'utilisation du sélecteur jquery " et "Résumé des plug-ins courants et de leur utilisation jQuery "

J'espère que cet article sera utile à tous ceux qui programment jQuery.