Please wait for 15 seconds...

Friday 2 August 2013



It is a common problem when you load page and some of images do not load properly that means image path is not genuine. There could be many other reasons for it but on the screen it gives very bad impression to website users.

Today's tutorial is based on this issue. Solutions is very simple if you are able to check whether image is loading properly or not. We will do here the same thing using jQuery and javascript.


[Required Skills]
[JQuery, jQuery.each(), Javascript]









Example One Example Two

Copy and paste below code before </head> in your HTML page.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
var img_url = 'IMAGE PATH';
$("<img>", {
   src: img_url,
   error: function(){
// unable to load image
alert('Oops! image URL is fake :(');
   },
   load: function(){
// images has been loaded successfully
alert('O ye, I found image :)');
   }
});
</script>

How to use this tool:

Example (Check if image does not load then load “no picture” image)


Copy and paste below code before </head> in your HTML page.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var img_url = '';
var img_obj = '';
$('.imgs').each(function(){
img_obj = this;
img_url = $(img_obj).attr('src');
img_id = $(img_obj).attr('id');
checkImgLoad(img_url, img_id);
});
});
function checkImgLoad(img_url, img_id){
$("<img>", {
  src: img_url,
  error: function(){
      // unable to load image
    $('#'+img_id).attr('src', 'images/no_img.png');
   },
  load: function(){
      // images has been loaded successfully
  }
});
}
</script>

Now insert below codes in your HTML <body> section.

<img id="img01" class="imgs" src="images/img01.png">
<img id="img02" class="imgs" src="images/img02.png">
<img id="img03" class="imgs" src="images/img030.png">
<img id="img03" class="imgs" src="images/img03.png">

Now reload the page and see the effect.

Posted by Atul

4 comments:

  1. This comment has been removed by a blog administrator.

    ReplyDelete
    Replies
    1. Thanks for asking me that question. First of all it is not a big deal if you take 15-20 minutes to summaries your idea and for writing, well everyone has his/her own style. For me, I just pickup a topic and summaries the whole Idea.

      After that I divide that into pieces/columns and just start writing.

      For example, I pick a topic "Codeigniter Controller". I will focus its first piece which is which is class that extents its parent class. Then second, its constructor. Then third, different methods which we can use as an individual page.

      Well above example is just for hint. If you want to make your carrier in blogging then just try and error. And always remember "to write better you have to read better". There are hundreds of blogs to take example from them.

      If you still have query in your mind do not hegitate to put your comment or you can email me directlly to techsirius@live.com, good luck

      Delete
  2. Thanks alot it saved my whole day

    ReplyDelete
  3. Awesome Thanks for the post

    ReplyDelete

Techsirius on Facebook