1

What I want is to be notified when all images are loaded after DOM change. I know there is a jQuery plugin, but I'm wondering if there is any native method.

Example of code that does not work: https://jsfiddle.net/wanpd5su/3/

// Real implementation will do an AJAX request to retrieve new
// document content. This one just sets a timeout instead.
$('#button').on('click', function doAjaxRequest() {
    // This function changes the document content so that it
    // contains new uncached images.
    window.setTimeout(function changeContent() {
        document.body.innerHTML = '<div id="div" style="background-image:url(\'http://lorempixel.com/800/600/abstract/?' + Math.random() + '\'); height:600px; width:800px;"></div>';
        // This handler should run when new conent
        // is ready and all images are loaded.
        // BOT IT DOES NOT :(
        $(window).on('load', function onLoad() {
            alert('Document updated successfully.');
        });
    }, 1000);
});
raacer
  • 5,302
  • 3
  • 27
  • 46
  • There is no onload event when you change content in the page. – epascarello Nov 25 '15 at 13:32
  • There is however capturable load event fired by every image element, see http://stackoverflow.com/questions/14983988/is-bubbling-available-for-image-load-events/24611104#24611104 Your example shows you are actually using `background-image`: detecting successful load in this scenario would be even more tricky. – myf Nov 25 '15 at 13:37
  • Image preload, than set the content after it is preloaded. – epascarello Nov 25 '15 at 13:40
  • The problem is that many images come from CSS, so it's hard to preload them automatically when they are used on the page only. – raacer Nov 25 '15 at 13:45
  • And yes, it seems the DIV elements with background images do not fair the load event, so nothing can bubble up. – raacer Nov 25 '15 at 13:47

0 Answers0