CODEWITHSUNDEEP
jquery
Dare Ham
Dare Ham

Reputation: 23

jQuery Load default image if other fails

I have been asking around but I dont seem to be getting any answers.

I want to load a default image which will be "/images2/no-avatar.png" if another image fails. The img id will be "avatar".

I have the latest version of jQuery so that wont be an issue.

The image will look something like this:

<img src="http://www.website.com/the-image.jpg" height="100" width="100" id="avatar" />

and if it fails look like this

<img src="/images2/no-avatar.png" height="100" width="100" id="avatar" />

I have been trying to find this for a while with no answers, so if you help thanks in advanced.

Upvotes: 2

Views: 5310

Answers (4)

user3236290
user3236290

Reputation: 51

This should works:

    <script>
            $('img').error( function() {
            $(this).attr('src', 'http://www.huntingdonarea.info/images/loading.gif');
            });
    </script>

Hope it helps you.

Upvotes: 0

Glenn
Glenn

Reputation: 21

Here is something that might work for you.

jQuery(document).ready(function (){
    jQuery.fn.LoadImage = function(options) {
        var settings = jQuery.extend( {
            'defaultImage'         : '/image/notfound.png',
            'ImageToLoad'         : null
        }, options);

        return this.each(function() {
            var jthis = jQuery(this);
            if(settings.ImageToLoad == null) settings.ImageToLoad = jthis.attr("src");
            var img = new Image();
            jQuery(img)
            .load(function () {
               jthis.attr("src", settings.ImageToLoad);
            })
            .error(function () {
                jthis.attr("src", settings.defaultImage);
            })
            .attr('src', settings.ImageToLoad);
        });
    };
});

Then you can implement it like this.. 

//Find all img src and show default if not found
jQuery("img").LoadDefault();

//Find all a certain ID and load a centain Image or default
jQuery("#imgObj").LoadDefault({defaultImage:"default.jpeg", ImageToLoad:"image.jpeg"});

and the solution to the question

   jQuery("#avatar").LoadDefault({defaultImage: "/images2/no-avatar.png" });

Upvotes: 2

demux
demux

Reputation: 4654

You can do this with html and css.

<style>
    .img {
        width:100px;
        height:100px;
    }
    .img.placeholder {
        background-image:url('placeholder.jpg');
    }
</style>

<div class="placeholder img">
    <div class="img" style="background-image:url('image.jpg')"></div>
</div>

The broken image won't show because it's a background.

Upvotes: 5

Aram Kocharyan
Aram Kocharyan

Reputation: 20421

I'm using a method with just CSS and it works fine. Since my avatars are fixed size and reside in a DIV I just set the background of that div to a default picture. When the img loads it overlays. However, you don't want a failed image sitting on top since that will have that [X] placeholder. I would use an Ajax call and if it fails I would set the src of the image to the default or set the class to no-avatar and control the background image and dimensions with CSS.

http://api.jquery.com/jQuery.ajax/

Upvotes: 0

Related Questions