Bereken document height na content load

Door Danny von Gaal op 10-07-2018 16:47

2.525 views

Hallo,

Ik heb een pagina met zoekresultaten waar er max 10 worden weergeven maar wanneer je onderaan de pagina bent moet de rest worden geladen. Alleen bij mij wordt de rest al geladen wanneer je net iets naar onder scrollt. Probleem is dat mijn document height het getal is van het document wanneer de rest nog niet is geladen.

Iemand een idee hoe ik de document height krijg nadat de content is geladen? Dus van een dynamic document? Ik heb al geprobeerd de document height te krijgen na $("div").on( 'scroll', function(){} maar dan krijg ik nog steeds de originele document height.

Ik gebruik JQuery

Dit is wat ik heb:


if($(window).scrollTop() + $(window).height() == $(document).height()) {
   // Load articles
}

R Rob Doemaarwat

10-07-2018 18:39 gewijzigd op 10-07-2018 18:42

Kun je dit niet (her-) berekenen "nadat de content is geladen"?

Of gewoon op elke onscroll opnieuw (evt. met een timeout, anders wordt het heel sluggish) (en met >= 0.7 * $(document).height() ipv ==, dan begint ie al als je bijna beneden bent - en staat al klaar als je echt beneden bent)

Danny von Gaal

11-07-2018 12:49

Hallo Rob,

Hoe moet ik dat herberekenen volgens jou? Ik dacht dat ik dat kon doen na onderstaande code maar dat blijkt niet zo want ik krijg steeds dezelfde height terug. In JQuery kan je "on" gebruiken wanneer je nieuwe data hebt ingeladen waar de dom nog niets vanaf weet.


 $("div").on( 'scroll', function(){}

R Rob Doemaarwat

11-07-2018 13:09

Ja, dus in die onscroll functie doe je steeds die hoogte check. Elke keer dat de gebruiker scrollt bepaalt die functie dan de actuele hoogte. Eventuele content die later wordt gelaten wordt dus bij de volgende onscroll vanzelf meegerekend.

Thomas van den Heuvel

11-07-2018 14:49

Kwartiertje Googlen.

<!--
https://www.phphulp.nl/php/forum/topic/bereken-document-height-na-content-load/102287
https://stackoverflow.com/questions/3898130/check-if-a-user-has-scrolled-to-the-bottom
https://stackoverflow.com/questions/379900/fade-in-each-element-one-after-another
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>infinite scroller</title>
<style type="text/css">
html, body      { height: 100%; margin: 0; padding: 0; font-family: sans-serif; }
#main           { margin: 0 25%; background-color: #ffcccc; min-height: 100%; padding-top: 50px; }
div.content     { margin: 0 50px 50px; height: 250px; padding: 25px; background-color: #aaaaff; display: none; }
div.content h2  { margin: 0; }
</style>
<script
  src="https://code.jquery.com/jquery-1.12.4.js"
  integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
  crossorigin="anonymous"></script>
</head>

<body>
<div id="main"></div>
<script type="text/javascript">
//<![CDATA[
$().ready(function() {
    $(window).scroll(function() {
        if ($(window).scrollTop() + $(window).height() >= $(document).height() - 250) {
            populate(5); // haal volgende 5 items op
        }
    });

    function populate(items) {
        // hier haal je de items op uit je database via een AJAX call naar een PHP-scriptje
        // hierbij kun je $('#main').children().length als OFFSET gebruiken, en items als LIMIT
        for (var i=0; i < items; i++) {
            var $html = $('<div class="content"><h2>#'+$('#main').children().length+'</h2><\/div>');
            $('#main').append($html);
            $html.delay(i * 300).fadeIn('slow');
        }
    }

    populate(10);
});
//]]>
</script>
</body>
</html>

Danny von Gaal

11-07-2018 15:58

Hallo Thomas,

Bedankt voor je reactie maar dat is dus exact wat ik zeg alleen heb je $("div").scroll vervangen door $(window).scroll. Maar beide werken niet voor mij omdat ik steeds de originele height van het document krijg ipv de nieuwe.

Misschien handig om erbij te zeggen dat ik het op mijn telefoon test dmv een app (phonegap). Misschien dat daar andere dingen voor nodig zijn.

Thomas van den Heuvel

11-07-2018 17:49 gewijzigd op 11-07-2018 17:51

Heb je vastgesteld dat de divs in kwestie wel afmetingen hebben (die ook veranderen?)? Als dat niet het geval is, verandert de documenthoogte mogelijk ook niet.

Heb je ook gecontroleerd of de uiteindelijke HTML klopt?

En ik neem aan dat je die resultaten ook echt dynamisch toevoegt, waarna je dus opnieuw de (actuele) hoogte zult moeten inspecteren.

Heb je dit alles ook in afzondering getest als een soort van proof-of-concept zoals mijn voorbeeld? Probeer voor de gein die pagina eens op te roepen met de device waar het niet op werkt? Het lijkt mij zaak om eerst te localiseren waar het nu precies misgaat.

Reageren

Inloggen om te reageren