Question

我使用此代码更改div的内容

mydiv.innerHTML = "html code with text and images";

是否有一些事件我可以用来在加载所有内容时收到通知？（无论是否有图像）

我想我可以通过所有子元素和addeventlisteners，但希望还有其他方法。

Answer 1

也许是这样的，只是为了给你一个关于vanilla javascript的想法

＆＃13;

var updateContent = function(element, content) {

    element.innerHTML = content;
    var images = element.querySelectorAll('img');
    var loadedItems = 0;
    var totalItems =  images.length;
    
    var loaded = function() {
        loadedItems++;
        
        console.log('loaded item: ' + loadedItems);

        if(loadedItems == totalItems) {
            element.classList.add('load-completed')
            console.log('finished loading all images');
        }
    };
    
    for(var i=0; i < totalItems; i++){
        if(images[i].complete) {
            loaded();
        } else {
          images[i].addEventListener('load', loaded);
          images[i].addEventListener('error', function() {
            console.log('error');
          });
        }
    }
}

updateContent(
     document.querySelector('.my-div'),
    '<h1>hello world<\h1><img src="http://lorempixel.com/400/200/sports/1"><img src="http://lorempixel.com/400/200/sports/2">'
);

＆＃13;

.my-div {
   border:solid 5px orange;
}

.my-div img {
    width: 100px; /* just to show it all in snippet */
    height: 50px;
}

.load-completed {
    border: dashed 5px green;
}

＆＃13;

<div class="my-div"></div>

＆＃13;

Answer 2

修改2012 Sorted Subarray from $A is [2] $A looks like this now: [2,1,3,4,2,1,2], comparing [2,1] (verify step) $b=$value, returing 1. swapping: $A[0] and $A[1] $A looks like this now: [1,2,3,4,2,1,2], insertion done Sorted Subarray from $A is [1,2] $A looks like this now: [1,2,3,4,2,1,2], comparing [2,3] (verify step) $b=$value, returing 1. swapping: $A[1] and $A[2] $A looks like this now: [1,3,2,4,2,1,2], comparing [1,3] (insertion step) $a=$value, returing 0. $A looks like this now: [1,3,2,4,2,1,2], insertion done Sorted Subarray from $A is [1,3,2] $A looks like this now: [1,3,2,4,2,1,2], comparing [2,4] (verify step) $b=$value, returing 1. swapping: $A[2] and $A[3] $A looks like this now: [1,3,4,2,2,1,2], comparing [3,4] (insertion step) $a=$value, returing 0. $A looks like this now: [1,3,4,2,2,1,2], insertion done Sorted Subarray from $A is [1,3,4,2] $A looks like this now: [1,3,4,2,2,1,2], comparing [2,2] (verify step) $a=$value, returing 0. Sorted Subarray from $A is [1,3,4,2,2] $A looks like this now: [1,3,4,2,2,1,2], comparing [2,1] (verify step) $b=$value, returing 1. swapping: $A[4] and $A[5] $A looks like this now: [1,3,4,2,1,2,2], comparing [2,1] (insertion step) $b=$value, returing 1. swapping: $A[3] and $A[4] $A looks like this now: [1,3,4,1,2,2,2], comparing [4,1] (insertion step) $b=$value, returing 1. swapping: $A[2] and $A[3] $A looks like this now: [1,3,1,4,2,2,2], comparing [3,1] (insertion step) $b=$value, returing 1. swapping: $A[1] and $A[2] $A looks like this now: [1,1,3,4,2,2,2], comparing [1,1] (insertion step) $a=$value, returing 0. $A looks like this now: [1,1,3,4,2,2,2], insertion done Sorted Subarray from $A is [1,1,3,4,2,2] $A looks like this now: [1,1,3,4,2,2,2], comparing [2,2] (verify step) $a=$value, returing 0. Sorted Array $A is [1,1,3,4,2,2,2]自 jQuery 1.7.0 起，不推荐使用实时方法。

现在建议.on() event用于附加事件处理程序。

这取代了live，.bind()和.delegate()。

请参阅文档：http://api.jquery.com/on/

原始答案

我认为 jQuery .live()事件可能正是您所寻找的。

试试这个

.live()

检测innerHTML更改后何时加载所有内容

2 个答案: