个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我有这个代码:
函数loader()将继续运行直到 <body>确实存在。当<body>确实存在，插入 .loader
<html>
<head>
<script type="text/javascript" src="jquery/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
loader();
function loader() {
if (!$('body').length) {
window.requestAnimationFrame(loader);
} else {
$('<div class="loader"></div>').prependTo('body');
}
};
</script>
</head>
<body>
<!-- elements -->
</body>
</html>
我想问这一行
if (!$('body').length) {}
做什么.length用来判断它的返回，是不是<body>或<body></body> ？是.length等待结束标签</body>或不？如果是这样，我的替代方案是什么？我需要.loader无需等待</body>即可插入。
我最后的手段是
<body>
<div class="container"></div>
<!-- rest of elements -->
</body>
那么
if (!$('.container').length) {}
但我需要不干扰元素结构的替代方案。
编辑:
我重新表述了问题并添加了以下代码。
<html>
<head>
<script type="text/javascript" src="jquery/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function(){
console.log("ready timestamp");
});
loader();
function loader() {
if (!$('body').length) {
window.requestAnimationFrame(loader);
} else {
console.log("length timestamp");
}
};
</script>
</head>
<body>
<!-- elements -->
</body>
</html>
输出:
15:03:19.862 length timestamp
15:03:20.198 ready timestamp
长度时间戳始终小于就绪时间戳。
测试:
Chrome 71.0 和 FF 65.0
在控制台设置中启用时间戳(开发人员工具 -> 控制台 -> 显示时间戳)。
其他人可能会问我为什么这样做，300ms 合适吗？
我实现了 PWA 并需要加载器，如下所示: Showing loader while navigating between pages - PWA 。问题是，.on('beforeunload')之间有300ms上一页和 $()下一页的。显然，这只是一个昙花一现。
理想情况下，这个问题可以通过服务器端脚本轻松解决，但正如我上面提到的，我无法访问服务器端脚本，我最多能问的是一个空白元素 <div class="container"></div> .
最佳答案
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
console.log( $('#tryToFindMe').length );
</script>
<div id="tryToFindMe"></div>与您的问题在定义之前尝试访问主体的方式类似，此代码段尝试在定义之前访问 div。在这两种情况下，元素都不会被发现。
这样做的原因是，当您的浏览器将网页解析为文档对象模型时，它会从上到下进行解析。因此，在脚本运行时，将在 DOM 中创建 div 的 html 尚未处理。因此脚本尝试查找该元素，它不存在，并且长度为零。
这就是为什么使用 jQuery 文档准备好、绑定(bind)到 DOMContentLoaded 事件或 load 事件存在的原因。这些不同的方法会推迟逻辑的执行，直到整个页面已被解析为 DOM，或者在加载的情况下，不仅页面已被解析为 DOM，而且所有资源也已被接收(图片、视频等)。如果没有这些方法，脚本将需要在定义元素后出现在页面中，以确保该元素已存在于 DOM 中。
在考虑与 DOM 交互时，重要的部分不是考虑 HTML。 DOM 包含节点，而不是 HTML。节点是从 HTML 生成的。
关于javascript - jQuery .length 是否已经准备好迎接 DOM 了？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54603317/
25
4
0
我是一名优秀的程序员,十分优秀！