V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
sivacohan
V2EX  ›  JavaScript

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

  •  
  •   sivacohan · 2013-05-04 14:47:57 +08:00 · 14214 次点击
    这是一个创建于 4232 天前的主题,其中的信息可能已经有所发展或是发生改变。
    目前在玩phantomjs,想要把网页转换成图片。

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

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

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

    那么,在这种情况下,我如何比较准确的判断js加载并且渲染完毕呢?
    3 条回复    1970-01-01 08:00:00 +08:00
    otakustay
        1
    otakustay  
       2013-05-04 16:50:10 +08:00   ❤️ 2
    这个问题的核心不是技术,而是什么是“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
        2
    sivacohan  
    OP
       2013-05-04 18:53:54 +08:00
    @otakustay 谢谢
    ghbjy1128
        3
    ghbjy1128  
       2013-05-05 06:59:58 +08:00
    js渲染? 如果是想得到JS的运行状态的话,当然是创建自定义事件。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   4201 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 04:10 · PVG 12:10 · LAX 20:10 · JFK 23:10
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.