收听页面内容已更新

发布于 2024-11-04 20:50:23 字数 155 浏览 0 评论 0原文

由于现在ajax被广泛使用，很多页面内容都是异步加载的。有没有办法知道所有 DOM 加载完成后是否加载了某些内容？例如，整个页面已加载，但某些图像是通过new image()创建/加载的，我如何知道Javascript在网页中发生了这些类型的变化？任何活动都可能有用吗？

原文

分享到QQ

分享到微博

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

发布评论

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

空城旧梦 2024-11-11 20:50:23

已经提到的突变事件应该可以解决问题。如果使用 jQuery，您可以使用“DOMSubtreeModified”突变事件执行类似的操作：

$(document).ready(function () {
    $('body').bind('DOMSubtreeModified', 'test', function () {
        alert('something changed');
    });

    $('#some-button').click(function () {
        $('body').append('<h4>added content</h4>');
    });
});

任何内容更改都将显示警报框。在该示例中，当单击 id 为“some-button”的按钮时，内容将添加到正文并显示警报。突变事件提供了一些更具体的事件类型，我所展示的事件可能是最一般的。

The mutation events as already mentioned should do the trick. If using jQuery, you can do something like this with the 'DOMSubtreeModified' mutation event:

$(document).ready(function () {
    $('body').bind('DOMSubtreeModified', 'test', function () {
        alert('something changed');
    });

    $('#some-button').click(function () {
        $('body').append('<h4>added content</h4>');
    });
});

Any content changes will display the alert box. In that example, when a button with id "some-button" is clicked, content is added to the body and the alert is shown. The mutation events offer some more specific type of events, the one I have shown is probably the most general.

回复收藏 0 原文

魔法唧唧 2024-11-11 20:50:23

有一些突变事件： http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-MutationEvent

onsubtreemodified
onnodeinserted
onnoderemoved
等等
看这里：https://developer.mozilla.org/en/DOM_Events

回复收藏 0 原文

以为你会在 2024-11-11 20:50:23

以下是可能有帮助的代码段：-

<script>
    var img = new Image();
    img.src = "http://static.yourwebsite.com/filename.ext";
    img.onreadystatechange = function(){
        if((img.readyState == "complete") || (img.readyState == 4)) {
            alert("Image loaded dynamically!");
        }
    };
</script>

您必须更改图像源。事件onreadystatechange将帮助您查明图像是否已加载。如果我在获取页面时没有弄错的话，readyState 必须是 AJAX 发送的 complete 或 4 。

或者您也可以使用

<script>
    var img = new Image();
    img.src = "http://static.yourwebsite.com/filename.ext";
    img.onload = function(){
        alert("Image loaded dynamically!");
    };
</script>

上述代码：http: //www.techrepublic.com/article/preloading-and-the-javascript-image-object/5214317

在此代码段中，我们使用 onload 事件来触发图像加载

希望如此有帮助。如果这有帮助，请将其标记为答案！ :D

干杯

Following is a code piece which may help:-

<script>
    var img = new Image();
    img.src = "http://static.yourwebsite.com/filename.ext";
    img.onreadystatechange = function(){
        if((img.readyState == "complete") || (img.readyState == 4)) {
            alert("Image loaded dynamically!");
        }
    };
</script>

You must change the image source. The event onreadystatechange will help you to find out if the image has been loaded or not. readyState must be complete or 4 as sent by AJAX if I'm not mistaken when the page is fetched.

OR YOU MAY GO WITH

<script>
    var img = new Image();
    img.src = "http://static.yourwebsite.com/filename.ext";
    img.onload = function(){
        alert("Image loaded dynamically!");
    };
</script>

CREDIT FOR THE ABOVE CODE: http://www.techrepublic.com/article/preloading-and-the-javascript-image-object/5214317

In this code piece, we use onload event to trigger the image load

Hope this helps. Mark this as the answer if this helps! :D

Cheers

回复收藏 0 原文

~没有更多了~