Thursday, March 27, 2014

Share It

How to hide or fix a broken image using jquery

Posted by Unknown , 9:06 AM Be the first to comment!
We commonly face a problem with broken images on websites. Our browsers will show a broken image when the link to an image doesn't work or when there is no image. Mostly this problem is faced when you make dynamic websites in which you work on putting a default image for posts. When a user/visitor come across your site having a broken image then he/she may lose interest on your website. So we need to put a small JQuery code so that the broken image disappears. In today's tutorial I want to show you the code for hiding the broken images.

You may like these

Get free likes for your facebook account.

Login script in PHP

Delete file using PHP

Delete Facebook account permanently

Disable graph search on Facebook

Pagination with PHP

Awesome stylish sliding professional contact form for your website

Use facebook on slow internet

How to delete google cache from search

How to scare your friends with simple code


Just look at the code below.
<script>
$(document).ready(function(){
$("img").error(function(){
        $(this).hide();
});   
})
</script>

Copy the above code and paste it above the closing </head> tag. That's it. You are done. is

Explanation:

 $(document).ready(function()) says the function to execute when the page loads.

$("img") finds the img tag.

error(function()) checks if the img tag has any error and executes the function to hide the broken image using $(this).hide();

Here this refers to the current one i.e., the img tag.

Thanks for reading this article. If you have any doubts please don't hesitate to comment below. 
Author: Bhanu Chander Bathini (CEO, Tricks Town.)
Hey friends, I am Bhanu Chander a Web Designer/Developer, Content writer, Freelance SEO analyst and a blogger. I am pursuing my M.Tech in Computer Science and Engg. You can contact me on bhanu4funn@gmail.com for web design solutions at low cost with effective SEO.
Free Mobile Balance →
Labels: , , ,

0 comments:

Subscribe to: Post Comments (Atom)