Question

我有代码我想在呈现页面之前运行。例如，更新从绝对时间到相对时间的日期或将原始文本（或降价）转换为html。如果我多次重新加载页面，我偶尔会看到闪烁的更新更新。我如何运行代码，而不是在需要重绘所有内容的末尾？

我试过document.addEventListener('beforeload'看来事件已折旧且Chrome不再支持

Answer 1

我会使用document.readyState和一个自我调用函数：

<body>
<script>
    function executeFunction() {
        //do stuff - such as check for anchor tags
        $("a").html('Replaced');
        if (document.readyState === 'loading') executeFunction(); // repeat to ensure all the tags get innerHTML-ed
    }
    (function(){
        if (document.readyState === 'loading') executeFunction();
    })();
</script>
<!-- more HTML --> 
</body>

您似乎希望JS在页面加载时执行。您可能还想尝试使用uninitialized作为就绪状态（在“加载”之前发生）。

Answer 2

您需要考虑页面生命周期。

当您加载页面时，如果遇到<script>标记，它将立即执行，并防止在该脚本完成之前呈现更多内容。 This isn't recommended practice.

但是，要回答你的问题，你可以做这样的事情：

<p>Your next reward will be available in <span id="nextRewardTime">3600</span>.</p>
<script type="text/javascript">
    var $el = $('#nextRewardTime');
    $el.text(format($el.text());
</script>

<p>Come back soon!</p>

现在，在浏览器下载第一个<p>之后，它会立即点击<script>标记并执行JS。只有完成后，它才会下载下一个<p>标签（“快回来！”）。

在Javascript上呈现之前，你无法将事件处理程序附加到Javascript上，因为......好吧......它不在DOM上。

更好的方法是首先在服务器上正确格式化事物。

编辑：此外，在整个页面中散布脚本标记会使您的代码无法维护！

在渲染之前更改html以避免闪烁

2 个答案: