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();
}
});