Detect if image is loaded on page.

Question

My question is not like this one: Browser-independent way to detect when image has been loaded

I have advertisements on my site for which I get paid per impression, now recently I have seen a dramatic drop in the number of impressions that each ad has been getting however I have been getting more average hits/month. Is it possible for me to detect if an image has been loaded or if something like a 404 (common with cheap ad blockers) has been loaded instead?

Answer 1

Often ad blockers is not a reason of "dramatic drop"...

You can add javascript that will "ping" your ad images server or you can check your images to be loaded... Both are very easy to implement, but if it fail it will distrub legal users. For example I hate when pages hang on close, because someone gather staistics and send request to the server in onunload event...

Answer 2

There's a "complete" property added to image tag on IE when the image is loaded. You can also listen the "load" and "error" events on images.

Answer 3

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.

Answer 4

One way would be to log the image loading using Ajax, using the onload event of the image. If you log page loads the same way, you can compare page loads to page loads that successfully loaded the image.

<img src="..." onload="logMe(this)" />

function logMe(img) {
   now = new Date()
   src = this.src

   ....your Ajax code that writes to the server log.

}

Answer 5

1.) There's an onload event for images... you can see when/if this is fired.

2.) You can use the DOM/JS to see if properties on the image exist and match what you're expecting.

3.) Be aware that if the image doesn't have a unique path, or is served up to be cached, that the browser won't re-fetch the image (so repeat visits won't reload images)

For the record, if you are getting paid per/impression you are quite lucky. Most systems only care about the hits. Thus if an image is loaded, it means nothing... but if a user clicks it, then there is compensation.