Question

由于今天广泛使用ajax，因此会异步加载许多页面内容。有没有办法知道加载所有DOM后加载的东西？例如，整个页面已加载，但有些图像是由new image()创建/加载的，我如何通过javascript知道网页中发生的这些变化？任何事件都有用吗？

Answer 1

如前所述，突变事件应该起作用。如果使用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”的按钮时，将内容添加到身体并显示警报。突变事件提供了一些更具体的事件类型，我所展示的可能是最常见的事件。

Answer 2

有一些突变事件：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

Answer 3

以下是可能有用的代码： -

<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

干杯

javascript监听页面内容更新

3 个答案: