Geek Answers Handbook

Fire event when images in the generated content are loaded

I had a problem with the content generated by Javascript:

I am using the event of onload()my html page to load HTML code from the server and enter it on the page. Since it is already html, I use the property innerHtmlfor the nodes that I want to fill with content.

As soon as I entered the HTML, I call the handmade function adjustHeights(), which normalizes the height of the elements that I created so that they all correspond to the height of the highest element.

All this works fine if the code inside innerHtmldoes not contain any image or other media that takes time to download (in particular, video), because it adjustHeights()is called between the code and the end of the download, the time of the image / video / etc.

Is there a way to wait for each item to be loaded before the call adjustHeights()? I already tried the property document.onreadystatechange, but the state is already completed when I start to enter the code.

If possible, I would prefer not to use hourly calls on adjustHeights().

To make the example clearer:

var mylist = document.getElementById('mycontent');
var li;
for (var i = 0; i < res.length; i++)
{
    li = document.create('li');
    li.innerHTML=res[i];
    mylist.appendChild(li);
}
adjustHeights();
+4
source share
2 answers

"onload", . :

<img src="someimage.png" onload="loadImage()" >

<script>
   function loadImage() {
     // code to adjust heights
    }
</script>

:

var img = document.querySelector('img')

function loaded() {
  alert('loaded');
  // do something to adjust height
}

if (img.complete) {
  loaded()
} else {
  img.addEventListener('load', loaded)
  img.addEventListener('error', function() {
      alert('error')
  })
}
+1

, onload // .., DOM . onload . , , , , , data-loaded="true".

- DOM: DOM. ( ).

. , .

DOM data-loaded, ( , ), element.complete. , .

.complete , onload, .

// Observe the DOM for changes
observeDOM(document.body, function(){ 
    checkNewMedia();
});

// Loop through all new media, add the event
var checkNewMedia = function() {

    // extend this by using document.querySelectorAll("img:not([data-loaded), video:not([data-loaded])") etc.
    var media = document.querySelectorAll('img:not([data-loaded]');
    for(var i = 0; i < media.length; i++) {
        addMediaLoadedEvent(media[i]);   
    }
}

// Fire the callback if complete, otherwise bind to onload
var addMediaLoadedEvent = function(element) {
    if (element.complete) {
        onMediaLoaded(element);
    } else {
        element.addEventListener('load', function(event) {
            onMediaLoaded(event.target);   
        });
    }
}

// The callback that is fired once an element is loaded
var onMediaLoaded = function(element) {
    element.setAttribute('data-loaded', 'true');

    adjustHeights(); // <-- your function
}

DEMO:

, , , :

// The callback that is fired once an image is loaded
var onMediaLoaded = function(element) {
    element.setAttribute('data-loaded', 'true');

    // only fire when there are no media elements without the 'data-loaded' attribute left
    // again, can be extended to use video, etc.
    if(document.querySelectorAll('img:not([data-loaded])').length === 0) {
        adjustHeights(); // <-- your function
    }
}

DEMO:

+9

More articles:


All Articles