Page is not completely loaded/rendered when onLoad

问题:

I'm using Phantomjs to examine my application. The page I am looking at includes a lot of components and is powered by Angularjs. My test server is slow. In the onLoadFinished event, I am imaging the web page using render:

page.onLoadFinished = function(response) {
    console.log(response, page.url);
    if (page.url.indexOf("login") == -1) {
        page.render('zoot.png');
        phantom.exit();
    }
};

My issue is that zoot.png only includes the site's menu bar. The menu bar's text and static images are rendered but the icons are Xs. The main page area is blank. A textual version number appears in the lower right which is expected.

It looks like the page was not fully drawn when the render happened. Is there another event that means "done and ready for use"?

回答1:

You might find a way here to register an event when angular has finished rendering, but it might not be necessary if you are willing to wait a static amount of time:

page.onLoadFinished = function(response) {
    console.log(response, page.url);
    if (page.url.indexOf("login") == -1) {
        setTimeout(function(){
            page.render('zoot.png');
            phantom.exit();
        }, 1000);
    }
};

You can also use waitFor to explicitly wait for the appearance of a selector which denotes the end of the load.

Note that page.open(url); and page.onLoadFinished = finishedFunction; is the same as page.open(url, finishedFunction).