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

Posted

技术标签:

【中文标题】加载特定元素后可以调用函数吗? [复制]【英文标题】: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 事件对于 imgobject 以外的元素不能可靠地工作 而且我的目标不是,而是或
元素...
我没有添加任何内容。一切都已经在 .html 文件中。我正在尝试在特定元素完成加载后开始动画。如果您知道我的意思,就像在加载后为“首屏”内容制作动画一样。 如果它是一个静态 HTML 文件,那么没有任何增量加载元素;浏览器一次呈现整个页面。 没有类似的事件。您必须首先实现检查单个图像的加载状态(如果这是您想要等待的?),然后在所有图像都是这种情况时触发您想要运行的任何内容。 【参考方案1】:

根据您问题中的此评论

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

您可以等待document.ready 事件。 <div><header> 元素不支持附加到 loadready 事件,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 在附加元素上发生更改时触发内部更改功能的警报。

【讨论】:

所以,答案是:不,我无法检查是否加载了特定元素(及其子元素)。谢谢。

以上是关于加载特定元素后可以调用函数吗? [复制]的主要内容,如果未能解决你的问题,请参考以下文章

UITableView 加载完成后可以调用函数吗?

vector 如何在特定位置调用复制构造函数?

加载特定 UpdatePanel 后如何调用客户端 javascript 函数

从复制构造函数调用默认赋值运算符是不好的形式吗?

Vue Router - 路由加载后调用函数

为啥这个函数调用后数组会改变? [复制]