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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

Meteor

JSLint - a Javascript code quality tool

jsFiddle

D3.js

WebStorm

推荐书目

Javascript 权威指南第 5 版

Closure: The Definitive Guide

这是一个创建于 4689 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

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

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

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

网页

渲染

3 条回复 1970-01-01 08:00:00 +08:00

otakustay

2013 年 5 月 4 日

这个问题的核心不是技术，而是什么是“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

PRO

2013 年 5 月 4 日

@otakustay 谢谢

ghbjy1128

2013 年 5 月 5 日

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