Change text after image is loaded

Question

<span>No images Loaded</span>
<div id="bar5" class="mosaic-block cover3">
    <div class="mosaic-overlay"><img src="images/Seg1.png" /></div>
    <a href="#" target="_blank" class="mosaic-backdrop">
        <div class="details">
            <h4>Mounted iMac And Desk Mod With Computer Components Built In</h4>
            <p>via Desktopped</p>
        </div>
    </a>
</div>

After the website loaded this image, I want to change the text to something else (eg. 1 Image Loaded).

How can I determine if the image has been loaded or not and then change the text

Answer 1

Since your original question did not include ANY mention of jQuery, here's a plain javascript solution:

You can use an onload handler for the image:

<span><span id="imagesLoaded">No</span> images Loaded</span>
<div id="bar5" class="mosaic-block cover3">
    <div class="mosaic-overlay"><img onload="imageLoaded()" src="images/Seg1.png" /></div>
    <a href="#" target="_blank" class="mosaic-backdrop">
        <div class="details">
            <h4>Mounted iMac And Desk Mod With Computer Components Built In</h4>
            <p>via Desktopped</p>
        </div>
    </a>
</div>

And the javascript:

var imageCount = 0;
function imageLoaded() {
    ++imageCount;
    document.getElementById("imagesLoaded").innerHTML = imageCount;
}

---

Using jQuery, if you just want to be notified when all images in the page are loaded, you can use this:

$(window).load(function() {
    // code here that runs when all images are loaded
});

---

If you don't want to change your HTML to include onload handlers and you want to be notified each time an image is loaded, you can do this with jQuery:

$(document).ready(function() {
    var imageLoadCount = 0;

    function updateLoadCount() {
        $("#imagesLoaded").html(imageLoadCount);
    }


    $("img").each(function() {
        // check if the image is already loaded
        if (this.complete) {
            ++imageLoadCount;
        } else {
            // image not loaded yet, install an event handler to notify us when it does
            $(this).load(function() {
                ++imageLoadCount;
                updateLoadCount();
            });
        }
    });
    if (imageLoadCount) {
        updateLoadCount();
    }
});

Answer 2

you can check like :-

$("#myImg").on('load',function() {
  alert('I loaded!');
// Do your change stuff here 
}).attr('src', 'images/Seg1.png');// Assign the Src here :-

Here is Javascript approach:-

    var img = document.getElementById('yourimg');

    var imageSrc = "images/Seg1.png";
    img.onload = function() {
        // Stuff to do after image load

    };
   img.src = imageSrc;