Image Load Error Handling with JavaScript and PHP

The images on your pages ever not loaded? Maybe… Well, have you ever noticed that?
1- Yes, I have.
2- No, how would it be?

If your answer is alike the second answer, now I am gonna talk about a quite simple method. With this method, you can informed easily and instantly about that your images not loaded and maybe you must. Yes, sometimes we need to know those image load failures, otherwise we can lose our visitors as a result of this non-tracking.

As known, “img” object has “onerror” function in HTML. This function might be called if there is a problem with image load. Here we are gonna save the error logs of our images by using this function. But we must do it after the page load and in a loop checking all images in order to contain all images on the page.

window.onload = funtion() {
   var imgs = document.getElementsByTagName('img'), i = 0, img;
   while(i < imgs.length) {
      imgs[i].onerror = function() {
         Ajax.post('imgerrorlog=true&src='+this.src);
         // you can add more params, such as time=1234567 etc.
      }
      i++;
   }
}

ajax.php

if($_POST['imgerrorlog'] == true) {
   // we need a function as filter to clean up the data
   $src = filter($_POST['src']);
   $file = date('Y-m-d') . '.txt';
   error_log($src . "\n", 3, $file);
}

or

function error_log_for_db($src) {
   mysql_query("INSERT INTO imgerrorlogs (src, date) VALUES ('$src', NOW())");
};

The JavaScript codes above provide us to save the error logs of the images. But, here you need to find Ajax.post part of it as you guess. If you like, you can save these logs to database or if you think this is cumbrous for your database then you can keep them as log files (daily or monthly) on your server.

Besides, you can add more action to this function. For example, you can put a default image instead which image is not loaded.

imgs[i].onerror = function() {
    Ajax.post('imgerrorlog=true&src='+this.src);
    this.src = 'images/noimg.gif';
}

Categories: AJAX, JavaScript, PHP
Tags: error handling, onerror