How to Fix Broken Image Links and Hide It using JQuery

Images really play an important role in getting readers more into what they are reading. Using images one can easily express every big matter using a simple smiley in that same way adding images can show what you actually want to say in that particular post. Well we have posted many blogger image based tutorial’s in the past related to making image’s 100% fit to blog’s width and even adding that awesome image fading effect to your post images.

Well today I will be posting on how you can easily remove those broken image links that might not load and show some error messages, well that actually looks bad, so what we are going to do is to remove all those image by hiding them using a simple jquery code, that’s pretty easy.

1. Open Blogger > Template > Edit HTML.
2. Press Ctrl + F and search for </head> tag & paste below code above it.

   <script>
   $(document).ready(function(){
   $("img").error(function(){
   $(this).hide();
   });  
   })
   </script>

3. That’s it now just save the template & its done.

Well now the code is placed and it will automatically scan for all the broken images and then hide them automatically from your post.

Explaining the whole code ?

Well if you wanna know how exactly this code is working, then here you go, well the $(document).ready(function()) code says the function to execute when the page loads and now to find the images we use the $("img") code, now to check for the error’s error(function()) code is used. Now the last one which is the key code to this one is the $(this).hide(); code that simply hides that image.