Führe etwas aus, während das Element angezeigt wird

Question

Ich benutze das Jquery inview plugin und versuche einige Elemente zu laden, wenn der Benutzer die Fußzeile der Seite erreicht. Dabei habe ich einen Fehler entdeckt, bei dem der Benutzer die Scroll-Taste gedrückt hält und die Maus nach unten zieht. In einigen Fällen werden die Elemente nicht mehr geladen, bis die Fußzeile nicht mehr in der Ansicht angezeigt wird. Hier ist die Funktion, die ich bisher haben die Elemente zu laden, wenn die Fußzeile im Ansichtsfenster ist:

//Infinite load function. Uses jquery.inview 
    $scope.addMoreElements = function(){    
     $scope.limitElementsPerPage += 16;    
     $('.footer').on('inview', function(event, isInView) { 
      if (isInView) { 
       // element is now visible in the viewport      
       $scope.limitElementsPerPage += 16; 
      } else { 
       // element has gone out of viewport 
       //do nothing 
      } 
     }); 
    }; 

ich für dieses Projekt sowie jQuery bin mit AngularJS. Was ich im Grunde brauche, ist etwas, das nach 1-2 Sekunden überprüft, ob das Element noch sichtbar ist. Ich bin mir nicht sicher, ob ich das jetzt tun sollte. Dies ist, was ich dieses Problem zu tun versucht zu lösen:

$scope.$watch($('.footer'), function(){ 
     $('.footer').on('inview', function(event, isInView) { 
      setTimeout(function(){ 
       while(isInView){ 
        console.log('test')     
       } 
      }, 1000);    
     }); 
    }); 

Diese leider wird der Browser zum Absturz bringen (ich bin nicht sicher, wie ich über das tun dies mit der setTimeout oder anderen verwandten Funktionen gehen würde).

Jede Hilfe oder Ideen, wie dies zu tun wäre, würde sehr geschätzt werden.

Vielen Dank im Voraus.

Answer 1

InView fügt ein neues Ereignis für Elemente hinzu, das ausgelöst wird, wenn das Element in das Ansichtsfenster eintritt. Wahrscheinlich haben Sie immer nur die Fußzeile im Ansichtsfenster, weshalb es fehlschlägt.

Ich denke, Sie müssen die Logik der Seite neu gestalten, um das Ereignis 'scroll' für jedes Element zu verwenden, das die hinzugefügten Elemente und Bildlauf für die unendliche Ansicht enthält, und in diesem Ereignis zu prüfen, ob die Fußzeile im Ansichtsfenster ist wenn es eintritt.

Ich persönlich verwende diese Erweiterung zu prüfen, ob es im Ansichtsfenster ist:

(function($) { 

    $.inviewport = function(element, settings) { 
var wh=$(window).height(); 
var wst=$(window).scrollTop(); 
var et=$(element).offset().top; 
var eh=$(element).height(); 
     return !(wh + wst <= et)&&!(wst >= et + eh); 
    }; 

    $.extend($.expr[':'], { 
     "in-viewport": function(a, i, m) { 
      return $.inviewport(a); 
     } 
    }); 


})(jQuery); 

Answer 2

Hier sind einige Funktionen, die Sie verwenden können:

 var getScrollY = function(){ 
      var supportPageOffset = window.pageXOffset !== undefined; 
      var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat"); 

      var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? 
        document.documentElement.scrollTop : document.body.scrollTop; 
      return y; 
     } 

     function get_elem_y(elem) { 
      var box = elem.getBoundingClientRect(); 
      return box.top + getScrollY(); 
     } 

Und dann können Sie mit dem Scroll-Ereignis hören so etwas wie <div id="footer">...</div>

var footer = document.getElementById("footer"); // get footer 
    var b_foot_visible = false; 
    window.addEventListener("scroll", function() { 
     var y = get_elem_y(footer); 
     var pageHeight = (window.innerHeight || document.body.clientHeight); 
     if((getScrollY() + pageHeight) > y) { 
      // footer is visible 
      if(!b_foot_visible) { 
       // TODO: add something 
       b_foot_visible = true; 
      } 
     } else { 
      // footer is not visible 
      if(b_foot_visible) { 
       // TODO: remove something 
       b_foot_visible = false; 
      } 
     } 
    }); 

So ist, footer übernehmen, wenn die scrollY + pages height erreicht die Fußzeilenelemente Y coordinate Sie können etwas tun, um Dinge für die Fußzeile anzuzeigen.

Sie können auch am Anfang einen Haken hinzufügen, um zu testen, ob die Fußzeile bereits sichtbar ist.