Browser-Independent Way to Detect When Image Has Been Loaded

Browser-independent way to detect when image has been loaded

NOTE: I wrote this in 2010, the browsers in the wild were IE 8/9 beta, Firefox 3.x, and Chrome 4.x. Please use this for research purposes only, I doubt you could copy/paste this into a modern browser and have it work without issue.

WARNING: It is 2017 now I still get points on this now and then, please only use this for research purposes. I currently have no idea how to detect image loading status, but there are probably much more graceful ways of doing it than this... at least I seriously hope there are. I highly recommend NOT using my code in a production environment without more research.

WARNING Part Two Electric Boogaloo: It is 2019 now, most jQuery functionality is built into vanilla JS now. If you're still using it, it may be time to stop and consider heading over to MDN and reading up on some of the new and fun stuff vanilla JS has to offer.

---

I'm a bit late to this party, maybe this answer will help someone else...

If you're using jQuery don't bother with the stock event handlers (onclick/onmouseover/etc), actually just stop using them altogether. Use the event methods they provided in their API.

---

This will alert, before the image is appended to the body, because load event is triggered when the image is loaded into memory. It is doing exactly what you tell it to: create an image with the src of test.jpg, when test.jpg loads do an alert, then append it to the body.

var img = $('<img src="test.jpg" />');
img.load(function() {
    alert('Image Loaded');
});
$('body').append(img);

---

This will alert, after the image is inserted into the body, again, doing what you told it to: create an image, set an event (no src set, so it hasn't loaded), append the image to the body (still no src), now set the src... now the image is loaded so the event is triggered.

var img = $('<img />');
img.load(function() {
    alert('Image Loaded');
});
$('body').append(img);
$img.attr('src','test.jpg');

---

You can of course also add an error handler and merge a bunch of events using bind().

var img = $('<img />');
img.bind({
    load: function() {
        alert('Image loaded.');
    },
    error: function() {
        alert('Error thrown, image didn\'t load, probably a 404.');
    }
});
$('body').append(img);
img.attr('src','test.jpg');

---

Per the request by @ChrisKempen ...

Here is a non-event driven way of determining if the images are broken after the DOM is loaded. This code is a derivative of code from an article by StereoChrome which uses naturalWidth, naturalHeight, and complete attributes to determine if the image exists.

$('img').each(function() {
    if (this.naturalWidth === 0 || this.naturalHeight === 0 || this.complete === false) {
        alert('broken image');
    }
});

Detect when a specific image has finished loading

You can try out this jquery solution: http://jqueryfordesigners.com/image-loading/

$(function () {
        var img = new Image();
        $(img).load(function () {
            //$(this).css('display', 'none'); // .hide() doesn't work in Safari when the element isn't on the DOM already
            $(this).hide();
            $('#loader').removeClass('loading').append(this);
            $(this).fadeIn();
        }).error(function () {
            // notify the user that the image could not be loaded
        }).attr('src', 'http://farm3.static.flickr.com/2405/2238919394_4c9b5aa921_o.jpg');
    });

How can I determine if an image has loaded, using Javascript/jQuery?

Either add an event listener, or have the image announce itself with onload. Then figure out the dimensions from there.

<img id="photo"
     onload='loaded(this.id)'
     src="a_really_big_file.jpg"
     alt="this is some alt text"
     title="this is some title text" />

Detect if image is loaded on page

How are you counting now? Judging by your question I suspect you're parsing the server log or the images are served via a dynamic url. If this is the case then the drop could be caused by client or proxy caching. Users are viewing the ads but the request never hits your server.

The obvious solution would be to disable caching but this is extremely rude to your visitors. The common approach now is to use a 1px GIF as a beacon to count an ad. JS would work too but you lose hits when JS is disabled.

<div id="ad">
  <img src="/real.gif?ad_id=3435">
  <img src="/beacon.php?ad_id=3435&random=6354377">
</div>

BTW: If the counting is done by the ad provider then there's always the possibility they are lying. Marketting people aren't generally the most honest or principled of folk.

Detect image load by jQuery

You need to attach an event handler for the load event:

Update 2017:

$('img').on('load', function() {
    alert('new image loaded: ' + this.src);
});

Plain JS/DOM:

imgNode.onload = () => {
    alert('new image loaded: ' + this.src);
};

jQuery: check if an image has finished loading

You can use load:

$img.load(function() {
  // image is loaded
});

If you have problems, load the code on window.load instead of document.ready.

how to know when the image was loaded if I change the src with js

Neat site by the way that is cool.

Here is how you can do it in jquery.

Browser-independent way to detect when image has been loaded

Checking if an image is loaded, cross browser

Something as:

var theImage = new Image()
theImage.src = 'http://pieisgood.org/images/slice.jpg' //yum, pie :)
theImage.isLoaded = false;
//later...
theImage.onload = function(){
    theImage.isLoaded = true;
    //do stuff
}
if(theImage.isLoaded){
    alert("Loaded");
}
document.body.appendChild(theImage); // VERY needed

Should work.

Just as it set attributes as the image is really loaded. :)

How to detect page load status after modification?

You can define and onload event for each image and in the event increment a counter until the last one is loaded, which would be the length of your array.

---

Related Topics