Changing an image src on the fly with Javascript

Question

I'm trying to change the src of some img tags if/when there is a problem with the pics when loading the page. I seem to be getting some random behavior particularly from Internet Explorer 9. Some of the images show the replaced image correctly and some have a red cross on them. If I debug in the browser I'm told that ImgError() is not defined. It's clearly defined in the code and is obviously working. Why is this happening?

<div class="PhotoBorder"><img alt="" onerror="imgError(this)" 
    src="./images/services/69_Staffmember.jpg" /></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">           
    </script>  

<script> 
$(window).load( function() {
    $('.RowWrapper').each(function() {
        var TotalWidth = 0;
        $(this).find('.StaffMember').each(function() {
            TotalWidth = TotalWidth + $(this).outerWidth(true);     
        });
        this.style.width = TotalWidth + "px";           
    });
});

function imgError(img)
{ 
    img.setAttribute("src","./images/services/49_ImgMissing.jpg");  
    img.removeAttribute("onerror");
}     

</script>

The script defining ImgError must be before any code that calls it. HTML is parsed and "executed" sequentially. — RobG
– RobG, Commented Mar 31, 2014 at 1:41
@RobG Your suggestion seemed to work. Please submit an answer and I will mark as correct. — Paul Matthews
– Paul Matthews, Commented Mar 31, 2014 at 2:50

Adam Jenkins · Accepted Answer · 2014-03-31 01:43:43Z

1

Firstly, if you're getting the error that ImgError() is not defined it's because your function name is imgError, not ImgError().

But, if that was a typo in your question then it's possible that you're getting the error imgError() is not defined at some points because chances are the image is being requested from the cache and it's error handler is firing instantaneously - i.e. before the rest of your document has been parsed meaning that your imgError function is not yet available. To fix it, just put your imgError function in a script tag in the head of your document.

answered Mar 31, 2014 at 1:43

Adam Jenkins

56.3k13 gold badges85 silver badges113 bronze badges

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

4 Comments

Paul Matthews Over a year ago

Yes that was just a typo in the question.

Paul Matthews Over a year ago

Wow, seriously? I am using a content management system. I don't have access to the head section of the page.

Paul Matthews Over a year ago

Isn't that the whole point of document.ready or even window.load?? The document is supposed to be ready to work on.

Adam Jenkins Over a year ago

@PaulMatthews - what part of your code has anything to do with $(window).load? the onerror attribute fires when there's an error requesting the image. That may be immediately or after a delay. Additionally, your imgError() function isn't inside any $(window).load (not that it would make a difference).

Tamil Selvan C · Accepted Answer · 2014-03-31 01:21:42Z

0

Give your image element an id and try this:

document.getElementById("imageid").src="./images/services/49_ImgMissing.jpg";

edited Mar 31, 2014 at 1:21

Tamil Selvan C

20.3k12 gold badges55 silver badges72 bronze badges

answered Mar 31, 2014 at 1:16

pj013

1,4291 gold badge12 silver badges31 bronze badges

7 Comments

Paul Matthews Over a year ago

Can't use IDs because there are many images. The code is designed to work for each individual one.

pj013 Over a year ago

are you using jquery?

s4m0k Over a year ago

@jp310 I think he is using jQuery based from the script code

pj013 Over a year ago

or you can try: $(".your_class").attr("src","your_src");

Paul Matthews Over a year ago

I use jQuery in my code as you can see but not for this. I simply use the onError attribute to call the ImgError() function.

|

Paul Matthews · Accepted Answer · 2014-04-28 03:16:32Z

0

I'm answering on behalf of RobG. The definition of imgError() was below where it was being called in my code. You must position your code definitions above where you make calls in your html. Otherwise your results may be undefined as I found out.

answered Apr 28, 2014 at 3:16

Paul Matthews

2,2445 gold badges23 silver badges29 bronze badges

Collectives™ on Stack Overflow

Changing an image src on the fly with Javascript

3 Answers 3

4 Comments

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related