当前位置：文江博客话题详情

JavaScript/jQuery 在页面加载之前将 html 附加到 UL 元素

发布于 2024-11-29 10:44:41 字数 126 浏览 1 评论 0原文

我的网页上有一个标题栏，用于向用户设置消息。标题由 JavaScript 动态创建。我希望内容在 UL 不包含任何 LI 的页面中显示时没有任何明显的延迟，然后突然填充它们。这可能吗？我想使用什么 JavaScript DOM 加载事件？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

煮茶煮酒煮时光 2024-12-06 10:44:41

您通常必须等待文档加载（现在是 document.ready）的原因是该元素存在于 DOM 中，以便您可以选择它。如果您需要修改的元素已存在于页面中，则无需等待。

以下示例不会工作

<script>
  var foo = document.getElementById('foo');
  ...do more stuff with foo...
</script>
<div id="foo"></div>

它不会工作，因为执行脚本时DOM尚未加载div#foo

以下示例将会它可以

<div id="foo"></div>
<script>
  var foo = document.getElementById('foo');
  ...do more stuff with foo...
</script>

工作，因为 div#foo 已经被解析并且元素存在。

您没有可以使用 JavaScript 侦听跨浏览器节点创建的特定事件。但是，如果您的脚本可以放置在创建元素之后，那么您就可以立即使用该元素。

The reason you typically have to wait for the document to load (document.ready these days) is so that the element exists within the DOM so you can select it. If the element you need to modify already exists within the page, you won't need to wait.

The following example won't work

<script>
  var foo = document.getElementById('foo');
  ...do more stuff with foo...
</script>
<div id="foo"></div>

It wont work because the DOM hasn't loaded div#foo when the script is executed

The following example will work

<div id="foo"></div>
<script>
  var foo = document.getElementById('foo');
  ...do more stuff with foo...
</script>

It works because div#foo has already been parsed and the element exists.

There's no particular event that you can listen for with JavaScript for cross-browser node creation. But if your script can be placed after the element has been created, you can work with the element instantaneously.

回复收藏 0 原文

渡你暖光 2024-12-06 10:44:41

一般来说，在 Javascript 中，当你希望某些东西能够顺利地显示时，即使构建该东西并不顺利，你所做的只是隐藏所有内容，直到它准备好为止。

换句话说，如果你这样做：

<ul style="display:none"></ul>

然后添加一些Javascript来添加LI，然后显示UL，你应该有你想要的效果。添加 LI 的 JS 可以位于 UL 之后的任何位置，如果将逻辑放在 onReady 或 onLoad 处理程序中，则可以位于 UL 之前的任何位置。

这是一个简单的 jQuery 示例：

<ul id="myList" style="display:none"></ul>
<script>
for (var i = 0; i < 5; i++) {
    $("#myList").append("<li>" + i + "</li>");
}
$("#myList").show();
</script>

ie。启动隐藏的 UL，向其中添加内容，然后显示它。希望有帮助。

Generally speaking, in Javascript when you want something to appear smoothly, even though building that something is not smooth, what you do is just hide everything until it is ready.

In other words, if you do:

<ul style="display:none"></ul>

then add some Javascript to add the LIs, then show the UL, you should have the effect you want. The JS to add the LIs can go anywhere after the UL, or anywhere before if you put the logic inside an onReady or onLoad handler.

Here's a quick jQuery example:

<ul id="myList" style="display:none"></ul>
<script>
for (var i = 0; i < 5; i++) {
    $("#myList").append("<li>" + i + "</li>");
}
$("#myList").show();
</script>

ie. start the UL hidden, add stuff to it, then show it. Hope that helps.

回复收藏 0 原文

~没有更多了~