js implémente la barre de défilement pour faire défiler vers le bas de la page et continuer les compétences de chargement_javascript

Cet exemple doit être considéré comme très simple, et il peut également être traité directement à l'aide de la méthode jQuery. Cependant, la couche inférieure de cet article est traitée à l'aide de js natif. Si vous rencontrez quelques petits points de connaissances, vous pouvez les analyser et cela en vaudra la peine.

Le principe est très simple, il suffit d'ajouter un événement scroll à la fenêtre. Chaque fois que le navigateur déclenchera l'événement scroll, il déterminera s'il a défilé jusqu'en bas du navigateur, et s'il l'a fait. atteint le bas, chargez de nouvelles données. La clé est de calculer si la barre de défilement a défilé vers le bas du navigateur. L'algorithme est le suivant

.

Barre de défilement hauteur de la fenêtre enroulée> La hauteur totale du document est de 50/*Je porterai la hauteur de la zone de réponse défilante à 50px*/; le jugement est vrai, puis indique que la barre de défilement a défilé vers le bas.

Exemple

  <style type="text/css">
  html,body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td{
   margin: 0;
   padding:0;
  }
  *{
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
  }
   .waterfllow-loading{
   z-index: 2000;
   display:none;
  }
  .waterfllow-loading.active{
   display:block;
  }
  .waterfllow-loading img.loading-progress{
   position: fixed;
   /*设置等待条水平居于窗口正中*/
   margin-left: auto;
   margin-right: auto;
   left: 0;
   right: 0;

   /*不能设置margin-top:auto和margin-bottom:auto否则IE下bottom就不顶用了*/
   bottom: 30px;
  } 
  </style>
  <div class="waterfllow-loading">
   <img class="loading-progress" src="busy.gif">
  </div>
 <script type="text/javascript">
 //图片查询中正对浏览器主页面滚动事件处理(瀑布流)。只能使用window方式绑定，使用document方式不起作用
 $(window).on('scroll',function(){
  if(scrollTop() + windowHeight() >= (documentHeight() - 50/*滚动响应区域高度取50px*/)){
   waterallowData();
  }
 });

 function waterallowData(){
  $('.waterfllow-loading').addClass('active');
  
  /*$.ajax({
   url:url,
   type:"post",
   data: params,
   success:function(data,textStatus,jQXHR){
    //添加数据
    ...

    //隐藏加载条
    $('.waterfllow-loading.active').removeClass('active');
   }
  });*/
 }

Obtenir la fonction de hauteur enroulée du haut de la page

 //获取页面顶部被卷起来的高度
 function scrollTop(){
  return Math.max(
   //chrome
   document.body.scrollTop,
   //firefox/IE
   document.documentElement.scrollTop);
 }

Le navigateur Chrome et Firefox/IE ont des interprétations différentes quant à savoir si la barre de défilement appartient au corps ou au HTML, ce qui entraîne un traitement différent.

Obtenir la hauteur totale de la page du document

 //获取页面文档的总高度
 function documentHeight(){
  //现代浏览器（IE9+和其他浏览器）和IE8的document.body.scrollHeight和document.documentElement.scrollHeight都可以
  return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
 }

Cet algorithme est cohérent avec la méthode jQuery de calcul de la hauteur du document.

Obtenir la hauteur de la fenêtre d'affichage du navigateur de pages

 function windowHeight(){
  return (document.compatMode == "CSS1Compat")?
  document.documentElement.clientHeight:
  document.body.clientHeight;
 }

Ce qui doit être expliqué ici, c'est document.compatMode. C'est très étrange, et il semble que je ne l'ai jamais rencontré en général.

Document.compatMode a deux valeurs : "BackCompat" et "CSS1Compat". L'explication officielle est BackCompat : le mode de compatibilité standard est désactivé. CSS1Compat : le mode de compatibilité des normes est activé.
Le rendu du modèle de boîte par IE est très différent entre le mode Standards et le mode Quirks. L'interprétation du modèle de boîte en mode Standards est la même que celle des autres navigateurs standard, mais il y a une grande différence en mode Quirks sans déclarer Doctype, IE. par défaut, le mode Quirks.
Donnez un exemple pour illustrer la différence entre les deux modes.

Lorsque document.compatMode est égal à "BackCompat", la largeur de la zone client du navigateur est document.body.clientWidth

Lorsque document.compatMode est égal à CSS1Compat, la largeur de la zone client du navigateur est document.documentElement.clientWidth.

Il existe d'autres attributs similaires. Je n'entrerai pas dans les détails ici, mais nous pouvons prévoir que les deux modes feront changer les pierres angulaires du rendu IE. Vous pouvez imaginer à quel point les bâtiments construits seront différents.

Alors s'il vous plaît, déclarer Doctype pour chaque page n'est pas seulement une bonne habitude, mais aussi un processus nécessaire. Le mode Quirks peut aller à la poubelle.

Ok, voici le code complet, avec un petit exemple (pas de rafraîchissement des données en arrière-plan, juste une barre d'attente)

<!DOCTYPE html>
<html lang="ch-cn">
 <head>
　　<meta charset="utf-8">
　　<script type="text/javascript" src='jquery-1.9.1.js'></script>
  <style type="text/css">
  html,body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td{
   margin: 0;
   padding:0;
  }
  *{
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
  }
   .waterfllow-loading{
   z-index: 2000;
   display:none;
  }
  .waterfllow-loading.active{
   display:block;
  }
  .waterfllow-loading img.loading-progress{
   position: fixed;
   /*设置等待条水平居于窗口正中*/
   margin-left: auto;
   margin-right: auto;
   left: 0;
   right: 0;

   /*不能设置margin-top:auto和margin-bottom:auto否则IE下bottom就不顶用了*/
   bottom: 30px;
  } 
  </style>
 </head>
 <body style="background:#ff0;height:1000px;">
  <div class="waterfllow-loading">
   <img class="loading-progress" src="busy.gif">
  </div>
 </body>
 <script type="text/javascript">

 //获取页面顶部被卷起来的高度
 function scrollTop(){
  return Math.max(
   //chrome
   document.body.scrollTop,
   //firefox/IE
   document.documentElement.scrollTop);
 }
 //获取页面文档的总高度
 function documentHeight(){
  //现代浏览器（IE9+和其他浏览器）和IE8的document.body.scrollHeight和document.documentElement.scrollHeight都可以
  return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
 }
 //获取页面浏览器视口的高度
 function windowHeight(){
  //document.compatMode有两个取值。BackCompat：标准兼容模式关闭。CSS1Compat：标准兼容模式开启。
  return (document.compatMode == "CSS1Compat")&#63;
  document.documentElement.clientHeight:
  document.body.clientHeight;
 }
 </script>
 <script type="text/javascript">
 //图片查询中正对浏览器主页面滚动事件处理(瀑布流)。只能使用window方式绑定，使用document方式不起作用
 $(window).on('scroll',function(){
  if(scrollTop() + windowHeight() >= (documentHeight() - 50/*滚动响应区域高度取50px*/)){
   waterallowData();
  }
 });

 function waterallowData(){
  $('.waterfllow-loading').addClass('active');
  
  /*$.ajax({
   url:url,
   type:"post",
   data: params,
   success:function(data,textStatus,jQXHR){
    //添加数据
    ...

    //隐藏加载条
    $('.waterfllow-loading.active').removeClass('active');
   }
  });*/
 }
 </script> 
</html>

L'image de la barre de chargement à l'intérieur de

est

Ce qui précède est un exemple de la façon de faire défiler vers le bas de la page et de continuer le chargement. J'espère que cela sera utile à l'apprentissage de chacun.