Question

我有这段代码

<script type="text/javascript">
$("#main_photo_display").load(function(){
    alert("loaded");
});
</script>

<div id="main_photo_display"></div>

一旦div加载，我需要它做一些事情。目前它什么都不做。当我用“#main_photo_display”代替窗口时，它可以工作。我已经google了，我一直在看。如何检查是否已加载页面元素。

Answer 1

当load元素和所有子元素都有时，load事件被发送到元素已完全装满。此事件可以发送到任何元素与URL相关联：图像，脚本，框架，iframe和窗口对象。

来源：http://api.jquery.com/load-event/

在同一页面上，他们说：

它没有正确地冒泡DOM树

因此，您无法委托此事件，事件处理程序必须附加到load事件触发的元素。

Answer 2

普通div没有加载事件，除非你用ajax加载内容（我不认为你在这里做的是什么）。如果您的代码实际位于页面中div之后，则div将可用并准备好让您的代码对其进行操作（您无需检查任何内容）。

如果您的代码位于页面中的div之前，那么您可以使用jQuery的.ready()方法来了解何时可以安全地访问div：

<script type="text/javascript">
    $(document).ready(function() {
        // safe to access $("#main_photo_display") here
    });
</script>

<div id="main_photo_display"></div>

Answer 3

或者您可以在DOM准备就绪后运行脚本，如下所示：

<script type="text/javascript">
$(document).ready(function() {
    $("#main_photo_display").load(function(){
        alert("loaded");
    });
});
</script>

<div id="main_photo_display"></div>

对不起，我想我读错了:)你需要这个：

<script type="text/javascript">
    $(document).ready(function() {
        alert('loaded');
    });
</script>

Answer 4

我认为DIV不会触发加载的事件。如果DIV中有blank.gif图像，您可以将$.load()函数附加到该图像上。

<div id="main_photo_display">
  ..... Other Content .....
  <img class="loadcheck" src="blank.gif" width="0" height="0" />
</div>

<script type="text/javascript">
$(document).ready(function(){

  $("#main_photo_display img.loadcheck").load(function(){
    alert("loaded");
  });

});
</script>

Answer 5

您不能这样做：load事件不会仅针对任何HTML元素触发，仅针对那些需要加载外部资源的事件。

确保加载元素的最佳方法是将script标记放在标记之后。

<div id="main_photo_display"></div>

<script type="text/javascript">
    alert("loaded");
</script>

在解析div之前，不会运行Javascript。

Answer 6

我有一种解决方法，它很草率（如果你有笔记，请注释掉）。

如果您的控件中有一个javascript，它会在页面加载时将元素附加到您的dom，这很有用。

$(function () {

    var counter = 0;

    var intervalId = setInterval(function () {
        $(document).mouseover()
    }, 105);

    var unbind = function () {

        $(document).off('mousemove', '#label');

        $(document).off('mouseover');

        window.clearInterval(intervalId);

    };

    $(document).mouseover(function () {

        $('#label').trigger('mousemove');

        counter++;

        if (jivositecounter > 200) unbind();

    });

    $(document).on('mousemove', '#label', function () {
        console.log(counter);
        ...doing our stuff when #label appears
        unbind();
    });

});

jquery .load没有检查我的元素是否已加载

6 个答案: