使用CTRL+SHIFT+R与F5重新加载时，元素测量的宽度不同

Element measured width is different when reloading with CTRL+SHIFT+R vs F5

本文关键字：测量 元素 F5 CTRL+SHIFT+R 新加载 加载 使用      更新时间：2023-09-26

我有插入元素并测量其宽度的代码。当使用F5（使用缓存）刷新时，宽度为440px。当使用CTRL+SHIFT+R（重新下载缓存文件）时，宽度为290px。使用$(window).load也提出了类似的问题。但我已经尝试过了，行为没有改变。在10秒内运行代码也会产生不同的结果。

问题似乎是在应用css之前运行度量。但是使用加载事件和/或10秒的超时应该可以解决这个问题。事实并非如此。

这是Firefox 30。页面上的所有其他脚本都被禁用。JS文件加载在页脚中，css加载在<head>中。

样品：

var $el = $(...);
$el.css('position','absolute').css('left','-9999999px');
$parent.append($el);
var Width = parseInt($el.outerWidth(), 10);
console.log('Width: '+Width); //290 OR 440

没有解决问题的类似问题：

chrome上的Jquery width（）函数在加载和重新加载（F5）时给了我不同的值

jQuery在Chrome 中页面刷新（F5）后表现异常

使用defer嵌入脚本，如下所示：

<script defer src="yourscript.js"></script>

使用defer加载脚本可确保在解析文档之后（但在激发DOMContentLoaded之前）执行脚本。

我使用defer on script标签解决了我的问题，并将其放在body标签的底部

相关文章：