onError behaving differently between browsers

问题

I'm trying to get the onError event to work but so far it only works in Internet Explorer 9. I have tried several codes but basically it comes down to this:

<img class="a_toc_image" src="' + asap.imgurl + '" onError="this.src=\'images/no_image.png\';" />

Internet Explorer 9:
Success: Gets an image from our database
Fail : Displays no_image.png
Chrome 20.0.11:
Success: Gets an image from our database
Fail : Just whitespace
Firefox 14.0.1:
Success: Gets an image from our database
Fail : Broken image icon

Many mostly aesthetical variants on this code ( such as leaving out or putting in " or ' ) yield similar results. This specific variant yielded a stack overflow in Iexplorer but otherwise nothing changed:

<img class="a_toc_image" src="' + asap.imgurl + '" onError=this.src="\images/no_image.png()" />

Who can tell me what is going wrong here and why it will only work in Iexplorer 9?

Thanks!

-Addition:

When using "inspect element" in Chrome on an image that fails to load I see this:

<img class="a_toc_image" src="images/no_image.png" onerror="this.src='images/no_image.png';">

So it looks like it is generating the correct output but for some reason won't show the image, correct? I have tried to put a .jpg instead of .png just now (maybe Chrome would just not show .png images) but that also does not solve anything.

-Addition 2, preceding code

// General functions

var open_mask = function () {

    //Get the screen height and width
    var maskHeight = $(document).height();
    var maskWidth = $(window).width();

    //Set height and width to mask to fill up the whole screen
    $('#mask').css({'width':maskWidth,'height':maskHeight});

    //transition effect     
    $('#mask').fadeIn(1000);    
    $('#mask').fadeTo("fast",0.7);  

};

var center_dialog = function (dialog) {

    //Get the window height and width
    var winH = $(window).height();
    var winW = $(window).width();

    var dialog_top =  (winH/2-dialog.height()/2) + $(window).scrollTop();
    var dialog_left = (winW/2-dialog.width()/2) + $(window).scrollLeft();

    dialog_top = (dialog_top >= 0) ? dialog_top : 0;
    dialog_left = (dialog_left >= 0) ? dialog_left : 0;

    dialog.css('top',  dialog_top);
    dialog.css('left', dialog_left);
};


//function that creates posts  

var updatepostHandler = function(postsJSON) {

    $.each(postsJSON,function(i,asap) {  

        if(i === 0) {
            first = asap.first;
            last = asap.last;
        } else {
            if(asap.type === 'article') {
                $('<div></div>')                        //create the HTML
                            .addClass('solid')  
                    .html('<div class="titbox">' + asap.title + '</div> \
                        <div class="boxinsolid"> \
                        <div class="aubox">' + asap.authors + '</div> \
                        <div class="doibox"> DOI: ' + asap.doi + ' </div> \
                        <div class="joubox">' + asap.journal + '</div> \
                        </div> \
                        <div class="imgbox"> \
                                <img class="a_toc_image" src="' + asap.imgurl + '" onError="this.src=\'images/no_image.png\';" /> \
                        </div>')        

                            .click(function(e) {  
                        open_details(e, asap.id);
                                })  
                            .prependTo($('#container'))
                    .slideDown('slow') 
            } else if(asap.type === 'ad') {
                $('<div></div>')                        //create the HTML
                            .addClass('ad')  
                    .html('<div class="titbox">' + asap.title + '</div> \
                        <div class="boxinsolid"> \
                        <div class="aubox">' + asap.authors + '</div> \
                        <div class="doibox">&nbsp;</div> \
                        <div class="joubox">' + asap.company + '</div> \
                        </div> \
                        <div class="imgbox"> \
                                <img class="a_toc_image" src="' + asap.image + '" onError="this.src=\'images/no_image.png\';" /> \
                        </div>')                        

                            .click(function(e) {  
                        open_details(e, asap.ad_id);
                                })  
                            .prependTo($('#container'))
                    .slideDown('slow') 
            }



        };

          });

};

回答1:

I tried it in Chrome and FF it seems that the problem is the (unnecessary) backslashes before your single quote characters. See this example: http://jsfiddle.net/Yapad/

So, you should use this code, instead of your code:

<img class="a_toc_image" src="' + asap.imgurl + '" onerror="this.src='images/no_image.png';">

Edit: Sidestepping the issue with proper handling of asap.imgurl would look like this:

<img class="a_toc_image" src="' + (asap.imgurl != "" ? asap.imgurl:"/images/no_image.png") + '">

来源：https://stackoverflow.com/questions/11794658/onerror-behaving-differently-between-browsers

标签

javascript

css

image

onerror