0

src が有効な場合に画像を表示するための小さな JavaScript コードを作成しようとしています。

より良い編成のために、スクリプトを html ページに分離する必要があります。

これが私がしたことです：HTML

<img id="thmb" src= "http://blog.lefigaro.fr/bd/img-sanctuaire.png" width="50px" height="50px" alt="" ;>

JavaScript

var thumbnail = document.images.thmb;

    if(thumbnail.src)
    {
        if(thumbnail.onerror)
        {
            thumbnail.src = "http://blog.lefigaro.fr/bd/img-sanctuaire.png";
        }
    }
    else
    {
        thumbnail.style.display = "none";
    }

しかし、HTMLでsrcコードを空にすると、画像の境界線がまだページ内にあるため、機能しません。また、間違った URL を記述すると、JavaScript で設定された画像が表示されません。これを実験するための JSFiddle を次に示します。 http://jsfiddle.net/gUb8X/

私は JavaScript の初心者です。ありがとうございました ！

4

4 に答える 4

1

きちんとしたインラインソリューションはこれです

デモhttp://jsfiddle.net/LstNS/25/

<img src="rando/path" id="image" onerror="this.style.display='none';"/>

jQuery: ajax 呼び出しを使用して、画像ファイルが存在するかどうかを確認できます

$.ajax({
    url:'http://yourhost/someimage.ext',
    type:'HEAD',
    error: function()
    {
        //file does not exist
    },
    success: function()
    {
        //file exists do something here
    }
});

デモhttp://jsfiddle.net/LstNS/24/

デモでわかるように、2 番目のイメージは読み込まれず、存在しないため壊れたイメージとして表示されます。

jQuery 以外のバージョンは次のようになります。

var img = document.getElementById("myImg");
img.onerror = function () { 
    this.style.display = "none";
}
于 2013-11-10T18:52:06.117 に答える
1

あなたはテストに遅すぎます。

これを試して

ライブデモ

window.onload=function() {
  var thumbContainer = document.getElementById("thmbDiv");
  var thumbnail = document.createElement("img");
  thumbnail.onload=function() {
    thumbContainer.appendChild(thumbnail);
  }
  thumbnail.src = "http://blog.lefigaro.fr/bd/img-sanctuaire.png";
}

画像を id thmbDiv の div に置き換えます

プレースホルダーを配置するか、テストするすべての画像を非表示にすると、データ属性から src を取得できます。

ライブデモ

window.onload=function() {
  var imgs = document.images; // or document.getElementsByClassName("testImage");
  for (var i=0, n=imgs.length;i<n;i++) { 
    var theImage = imgs[i];   
    var src = theImage.getAttribute("data-src");
    if (src) {
      theImage.onerror=function() {
        this.style.display="none"; // or this.parentNode.removeChild(this);
      }
    }
    theImage.src=src;  
  }
}
于 2013-11-10T18:52:30.483 に答える
0

それを可能にするちょっとしたトリックを見つけました。それは慣習に従っていませんが、機能します。「alt」画像キーワードを「src」キーワードとして使用するだけで、JavaScript は src を html にある alt 属性と等しくします。

<img id="thmb" width="50px" height="50px" alt="http://blog.lefigaro.fr/bd/img-sanctuaire.png" ;>

Javascript :

var img = document.getElementById("thmb");
img.src= img.alt;

img.onerror = function () {
    img.style.display = "none";
}

http://jsfiddle.net/LstNS/28/

さらに、関数を使用してすべての最終的な html コードを返す必要があるため、次のようにしました。

display: function (data) {
                            var pid = data.record.project_id;
                            var thb = data.record.Thumbnail;
                            var base_url = "<?php echo base_url('project');?>/";
                            function checkImg(){
                                try
                                {
                                    var thumbnail = document.createElement("img");
                                    thumbnail.src = thb;
                                } catch(err) {
                                    //
                                }
                                if(thumbnail.height > 0){
                                    var result = 'src="' + thb + '"';
                                }
                                else
                                {
                                    var result = 'style="display:none;"';
                                }
                                return result;
                            }
                            return '<a href="' + base_url + pid + '"><img id="thumbnail" ' + checkImg() + '" width="50px" height="50px" ></a>';
                        }

私はそれを行うための良い方法を見つけることを可能にするあなたのすべての答えに感謝しなければなりません! コメントがあれば、ためらわずに ! ;)

于 2013-11-11T16:51:20.593 に答える