Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to scroll in PhantomJS to trigger lazy loads?

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:

  • not able to lazy load in phantomjs
  • How to scroll down with Phantomjs to load dynamic content
  • https://github.com/ariya/phantomjs/issues/11512

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.

like image 490
Seti Avatar asked Aug 12 '15 11:08

Seti


1 Answers

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.
like image 173
Seti Avatar answered Nov 20 '22 04:11

Seti