onError在浏览器之间的行为不同 [英] onError behaving differently between browsers

问题描述

我试图让onError事件工作，但到目前为止它只能在Internet Explorer 9中工作。我尝试了几个代码，但基本上归结为：

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： >
  
• 成功：从我们的数据库获取图片



• 失败：显示no_image.png

  Chrome 20.0.11：

  Chrome 20.0.11:

  失败：仅空白

  Firefox 14.0.1：

  这个代码上的许多大多是美学的变体（如省略或放入or）产生类似的结果。

  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()" />
  

  可以告诉我这里发生了什么问题，为什么它只能在Iexplorer 9中工作？

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

  感谢！

  在Chrome中对无法加载的图片使用inspect element时，会看到以下内容：

  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';">
  

  所以它看起来像生成正确的输出，但由于某种原因不会显示图像，正确？我试图把一个.jpg而不是.png只是现在（也许Chrome不会显示.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.

  - 添加2，前面的代码

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

  
  

  推荐答案

  问题是在你的单引号字符之前的（不必要的）反斜杠。
  查看此示例： http://jsfiddle.net/Yapad/

  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';">
  

  编辑：
  回避正确处理asap的问题.imgurl将如下所示：

  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") + '">
  

  这篇关于onError在浏览器之间的行为不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！