如何判断页面的js渲染完毕

[sivacohan]

目前在玩phantomjs，想要把网页转换成图片。

但是现在很多网页的js采用异步加载的方式。比如require.js，sea.js之类的东西。

这种情况造成了页面还没有渲染完成，phantomjs已经调用render了。这样网页会有元素的缺失。

在邮件列表提问，得到的答复是，写个sleep函数，占用时间。但是这种方便并不理想。

那么，在这种情况下，我如何比较准确的判断js加载并且渲染完毕呢？

[otakustay]

这个问题的核心不是技术，而是什么是“js渲染完毕”。
我举个例子，有一个页面，每5秒从后端拉一次数据，在页面上更新几个条目，永远这样不结束，那么这个页面什么时候“渲染完毕”？

如果你可以定出一个渲染完毕的标准，那么你就可以通过定时地检测这个标准来判断，比如下面的代码是把“一个id叫username的span元素出现”作为标准的（不少网站是页面展现完再去加载一次当前用户信息，在右上角显示个用户名，以此为例）：

function check() {
// 在这里写你自已的标准
return document.getElementById('username');
}
function waitForReady() {
if (!check()) {
return setTimeout(waitForReady, 50); // 每50毫秒检查一下
}
else {
// phantom与页面的通信推荐用alert来做
alert('ready');
}
}
waitForReady();

在phantom中的代码这么来（已经有点忘了phantom的API了）：
var page = new WebPage();
page.onAlert = function (message) {
if (message === 'ready') {
takeScreenshot(page); // 截图
}
}
page.open(url, function () { console.log('page loaded but not ready'); });

[sivacohan]

@otakustay 谢谢

[ghbjy1128]

js渲染？ 如果是想得到JS的运行状态的话，当然是创建自定义事件。