1

onErrorイベントを機能させようとしていますが、これまでのところInternet Explorer 9でのみ機能します。いくつかのコードを試しましたが、基本的には次のようになります。

<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:

  • 成功:データベースから画像を取得します
  • 失敗:空白だけ

  • Firefox 14.0.1:

  • 成功:データベースから画像を取得します
  • 失敗:壊れた画像アイコン

このコードの多くの主に美的なバリアント(「または」を省略または挿入するなど)は、同様の結果をもたらします。この特定のバリアントは、Iexplorerでスタックオーバーフローを引き起こしましたが、それ以外は何も変更されていません。

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

ここで何が問題になっているのか、なぜIexplorer 9でしか機能しないのかを誰が教えてくれますか?

ありがとう!

-添加:

ロードに失敗した画像でChromeの「要素の検査」を使用すると、次のように表示されます。

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

正しい出力を生成しているように見えますが、何らかの理由で画像が表示されませんよね?今、.pngの代わりに.jpgを入れようとしましたが(Chromeでは.png画像が表示されない可能性があります)、それでも何も解決されません。

-追加2、先行コード

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



        };

          });

};
4

1 に答える 1

2

ChromeとFFで試してみましたが、問題は一重引用符の前の(不要な)円記号にあるようです。この例を参照してください:http://jsfiddle.net/Yapad/

したがって、コードの代わりに次のコードを使用する必要があります。

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

編集: asap.imgurlの適切な処理で問題を回避すると、次のようになります。

<img class="a_toc_image" src="' + (asap.imgurl != "" ? asap.imgurl:"/images/no_image.png") + '">
于 2012-08-03T11:27:40.673 に答える