javascript - How to scroll in PhantomJS to trigger lazy loads? - Stack Overflow

admin管理员组

文章数量:1333710

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

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.

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./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.

• javascript
• scroll
• phantomjs

Share Improve this question Follow edited May 23, 2017 at 11:47 CommunityBot 111 silver badge asked Aug 12, 2015 at 11:23 SetiSeti 2,3141717 silver badges2727 bronze badges 2

• 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. Commented Aug 12, 2015 at 11:25
• Of course, thanks for pointing that out - i think i have done it right now. – Seti Commented Aug 12, 2015 at 11:34

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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.

本文标签： javascriptHow to scroll in PhantomJS to trigger lazy loadsStack Overflow