8

I have a problem with triggering lazy loading on scroll with PhantomJS. None of the previous answers (even accepted ones) worked for me. Most were for old PhantomJS versions.

Other questions - almost same or similar to mine without or with answers that are not working:

All of them tries to utilize window.document.body.scrollTop = document.body.scrollHeight with page.evaluate() or even if they try to use proper page.scrollPosition then for some reason they use some explicit gathered hard coded scroll values, or limits theirs scrolls for some elements that should be on the page when scroll is available.

Community
  • 1
  • 1
Seti
  • 2,169
  • 16
  • 26
  • Even if you self-answer, questions should still be good questions. Describe what the exactly problem is and link to previous questions that didn't work. – Artjom B. Aug 12 '15 at 11:25
  • Of course, thanks for pointing that out - i think i have done it right now. – Seti Aug 12 '15 at 11:34

1 Answers1

8

PS: before rendering the page - please use page.scrollPosition = { top: 0, lefT: 0}; or you will see only bottom of the page rendered.

var vWidth = 1080;
var vHeight = 1920; 
page.viewportSize = {
    width: vWidth ,
    height: vHeight 
};

//Scroll throu!
var s = 0;
var sBase = page.evaluate(function () { return document.body.scrollHeight; });
page.scrollPosition = {
    top: sBase,
    left: 0
};

function sc() {
    var sBase2 = page.evaluate(function () { return document.body.scrollHeight; });
    if (sBase2 != sBase) {
        sBase = sBase2;
    }
    if (s> sBase) {
        page.viewportSize = {width: vWidth, height: vHeight};
        return;
    }
    page.scrollPosition = {
        top: s,
        left: 0
    };
    page.viewportSize = {width: vWidth, height: s};
    s += Math.min(sBase/20,400);
    setTimeout(sc, 110);
}
sc();
  • First we set s and sBase (current scroll offset, and maximum scroll offset).

  • Then we scroll page with phantom to the end.

  • We define scroll function - that will scroll from 0 to bottom (sBase) in steps of pageHeight/20 or 400 (which is lower in value) each 110 ms. ** This function also can handle infinite scroll - if tweaked a bit. But i give you the basic usage that should stop if page loads too slow;P

  • We also change viewport -as some lazyload script were still not triggered with bare scrolling.
Seti
  • 2,169
  • 16
  • 26
  • 1
    You might want to rename your variable `s` and `sBase` to something more descriptive, because they are relatively short and don't carry much information on their own. – Artjom B. Aug 12 '15 at 11:55
  • 1
    Tried this (on twitter) and have two problems: 1) new elements don't seem to be loading, not sure if phantomjs disables ajax calls? 2) page seems to zoom in on every iteration because height is reduced, up until viewport is only something like 116px tall, I think this has to do with issue 1). Do you know why new elements aren't loading? – PGT Feb 09 '17 at 07:26