加载特定元素后可以调用函数吗？ [复制]

Posted 2023-05-09

【中文标题】加载特定元素后可以调用函数吗？ [复制]

【英文标题】：Can function be called after speficic element is loaded? [duplicate]

【发布时间】：2019-01-21 09:21:54

【问题描述】：

加载特定元素后有什么方法可以调用函数吗？

类似这样的：

var element = $('.elements-class');
element.on('load', function() 
    // Do something
);

编辑（更好的解释）：

DOM 准备好后，我有了元素，在该元素中是几张图片和一些文字。因此，我想在加载该块后为其设置动画，并且它都是子块。我不想等待页面的其余部分被加载。只有那个特定的元素，在这个例子中是元素。

【问题讨论】：

使用document.ready，或者AJAX调用的回调，如果那是你添加html的地方。 load 事件对于 img 和 object 以外的元素不能可靠地工作

而且我的目标不是，而是或

我没有添加任何内容。一切都已经在 .html 文件中。我正在尝试在特定元素完成加载后开始动画。如果您知道我的意思，就像在加载后为“首屏”内容制作动画一样。

如果它是一个静态 HTML 文件，那么没有任何增量加载元素；浏览器一次呈现整个页面。

没有类似的事件。您必须首先实现检查单个图像的加载状态（如果这是您想要等待的？），然后在所有图像都是这种情况时触发您想要运行的任何内容。

【参考方案1】：

根据您问题中的此评论

我没有添加任何东西。一切都已经在 .html 文件中。我正在尝试在特定元素完成加载后开始动画。类似的，如果你明白我的意思的话，在加载“首屏”内容后对其进行动画处理。

您可以等待document.ready 事件。 <div> 或 <header> 元素不支持附加到 load 或 ready 事件，load 事件通常针对加载远程资源的元素，例如 <img>。

这样做：

$(function () 
    //Do something
);

您确保在文档完成加载时执行回调中的代码。

---

跟进您的编辑。您可以将<script> 标签插入到dom 中，它们将按照插入的顺序执行。例如：

<div>
    <h1>Fancy title</h1>
    <script>
        /*
            here you can put code to manipulate dom elements inserted
            before this script tag.
            Trying to do $('p') here will not find the element because
            is not already in the dom.
        */
    </script>
    <p>Lorem ipsum dolor sit amet.</p>
</div>

如果您需要，请告诉我。

【讨论】：

我知道 document.ready 是如何工作的。有什么方法可以在 DOM 准备好后等待元素加载。比如，window.on('load') 是否有同义词，但对于特定元素？

您希望加载的元素来自一些 AJAX 响应，还是在文档准备好之后 附加？因为如果没有，你应该使用 document.ready。

页面加载时，所有内容都按顺序加载。但是，例如，图像是在 window.on('load') 上加载的。但我不想等待整个页面被加载。只有我的第一个元素 (

【参考方案2】：

由于您的 HTML 中已经包含所有内容，并且您想要执行一些操作/调用一些您可以使用的函数：

$(document).ready(function () 
    //add your code here
);

请参阅 JQuery 文档以更好地了解 .ready 函数的工作原理。

在文档“准备就绪”之前，无法安全地操作页面。 jQuery 会为您检测到这种准备状态。内含代码 $( document ).ready() 只会运行一次页面 Document Object 模型 (DOM) 已准备好执行 javascript 代码。包含代码 $( window ).on( "load", function() ... ) 将运行一次 整个页面（图像或 iframe），而不仅仅是 DOM，都准备好了。

如果您还希望某些函数在元素更改时始终执行某些操作，您可以将 .change() 附加到该元素，如下所示：

<form>
  <input class="target" type="text" value="Field 1">
  <select class="target">
    <option value="option1" selected="selected">Option 1</option>
    <option value="option2">Option 2</option>
  </select>
</form>
<div id="other">
  Trigger the handler
</div>

将事件绑定到具有类目标的所有元素。

$( ".target" ).change(function() 
   alert( "Handler for .change() called." );
);

这将在每次 DOM 在附加元素上发生更改时触发内部更改功能的警报。

【讨论】：

所以，答案是：不，我无法检查是否加载了特定元素（及其子元素）。谢谢。