OnError behaves differently between browsers

I'm trying to fire the onError event, but so far it only works in Internet Explorer 9. I've tried a few codes, but it basically boils down to this:

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

      

  • Internet Explorer 9:
  • Success: getting an image from our database
  • Error: Displays no_image.png

  • Chrome 20.0.11:

  • Success: getting an image from our database
  • Error: Just spaces

  • Firefox 14.0.1:

  • Success: getting an image from our database
  • Fail: Icon with damaged image

Many mostly aesthetic variations of this code (such as deleting or adding "or") produce similar results. This particular variation resulted in 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 wrong here and why will it only work in Iexplorer 9?

Thank!

-Addition:

When you use "check item" in Chrome on an image that is not loading, 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 it won't show the image, right? I've tried putting .jpg instead of .png just now (maybe Chrome just won't display the .png images), but that doesn't solve anything either.

Appendix 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


source to share


2 answers


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

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

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

      



Edit: Dodging the problem with correct handling of asap.imgurl would look like this:

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

      

+2


source


The attribute must be onerror

on all line strings:



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

      

-1


source







All Articles