jQuery Load default image if other fails

Question

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.

you've asked before but what constitutes "fail" , is src empty? can you check for file exists on server? — charlietfl
– charlietfl, Commented Mar 11, 2012 at 19:53

demux · Accepted Answer · 2012-03-11 20:07:42Z

5

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.

answered Mar 11, 2012 at 20:07

demux

4,6742 gold badges36 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dare Ham Over a year ago

It would be much more easier for me to do it with jQuery. But thanks.

Glenn · Accepted Answer · 2012-06-15 05:36:59Z

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" });

Aram Kocharyan · Accepted Answer · 2012-03-11 19:54:42Z

0

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/

answered Mar 11, 2012 at 19:54

Aram Kocharyan

20.5k11 gold badges84 silver badges98 bronze badges

Comments

user3236290 · Accepted Answer · 2014-03-03 14:10:49Z

0

This should works:

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

Hope it helps you.

answered Mar 3, 2014 at 14:10

user3236290

517 bronze badges

Collectives™ on Stack Overflow

jQuery Load default image if other fails

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related