在webkit中,在页面渲染和页面加载上发布运行脚本

issue runing script on page render vs page load, in webkit

本文关键字:脚本 布运行 运行 webkit 加载      更新时间:2023-09-26

我有一个脚本,使用一些元素偏移。我打算用以下命令启动这个脚本:

window.addEventListener('load', function() {
    ...
}

当我使用这个方法时,所有的DOM元素都被定义了,但是偏移值是错误的。我可以通过关闭一些css值来获得提供的偏移量。我应用的一个快速/糟糕的修复:

window.addEventListener('load', function() {
    function my_func(){
        ...
    }
    window.setTimeout(my_func, 1000);
});

这渲染正确的偏移量,但我只是觉得它的管道胶带。

我最后一次尝试是强迫webkit渲染,但这也有错误的偏移量:

 window.addEventListener('load', function() {
    function my_func(){
        ...
    }
    document.getElementById('wrap').style.display = 'none';
    document.getElementById('wrap').style.display = 'block';
    my_func();
});

有什么建议吗?或者解释为什么会发生这种情况。我测试的浏览器是Chrome。

编辑:

偏移量属于dom结构:

<div id="wrap">
    <div>
        <p>...</p>
        <p>...</p>
        <p>...</p>
    </div>
    <div>
        <p>...</p>
    </div>
   ...
</div>

我通过(for)跳过"#wrapdiv"的节点列表来访问偏移量。如果我关闭行高和字体大小,我将获得在布局完全渲染之前计算的偏移量。

在使用offsetHeight之前调整每个p和div的行高,字体大小和显示,没有影响。

你应该使用load而不是ready在页面渲染,因为你不知道你的CSS和图像何时完成加载。

如果你的偏移量在load中不正确,那么就有别的事情发生了