これは、存在しないイメージの代わりにプレースホルダを塗りつぶすのにはうまく機能します。私は好奇心だった何2つの代替イメージプレースホルダを持つ方法
<img src="cantfind.jpg" onError="this.onerror=null;this.src='http://placehold.it/600x600?text=No Picture'">
のonErrorイベント内の2つのプレースホルダを行う方法があった場合です。だから私はこれをやってみたが、Javascriptは私に来ていない。何か案は？変数にURLを割り当てようとしましたが、ちょっとしたxhr要求や何かをしないと最初のプレースホルダが失敗したかどうかを確認する方法がわかりません。
チェック現在srcは、プレースホルダの1に等しく、それに応じて新しいURLを割り当てた場合：
onerror="
var p1='http://.......', p2='http://......';
if (this.src == p1) this.src = p2; else if (this.src != p2) this.src = p1;
"
私はこの質問をより正確に答えたので、私はこれを選んだが、望むならば、膨大な数の画像を積み重ねることができるので、他の質問の答えも本当に好きです。 – BarryMode
ここで扱う再帰的なイベントを経て、それを行うための一つの方法だ...ロードを試してみて、それエラーなら、してみてください配列から最初の要素をロードし、失敗した場合は次のインデックスでエラーに設定します。
これは、ソース配列内の任意の数の定義済みのプレースホルダに対応します。
<img id="img" src="example.jpg" onerror="loadNextImage(0);" alt="logo image">
<script>
var imagesDir = 'path/to/images/directory/';
var sources = [ '01.jpg', 'test.gif', 'bamf.jpg', 'foobar.jpg' ];
var index = 0;
function loadNextImage(index) {
var image = document.getElementById('img');
if (index < sources.length) {
console.log('Index:', index, sources[index]);
image.onerror = function() { loadNextImage(index + 1); };
image.src = imagesDir + sources[index];
} else {
image.alt = 'No suitable image found to display';
}
}
</script>
「2つのプレースホルダ」とはどういう意味ですか？ 1番目のプレースホルダが存在しない場合、2番目のプレースホルダを意味しますか？このためには、可能なsrc値の配列を調べ、呼び出されるたびにインデックスを増やすために、再帰関数を記述する必要があります。現時点では広すぎますが、あなたが試みていないコードは投稿していません。それをしたら、私たちはあなたをさらに助けることができます。 – ManoDestra
ああ、私は配列を使う考えが好きです。私が作業していたコードはどこにも行かないので、それを共有しませんでした。私はあなたが提案したものの後に働くことができないいくつかのコードで昼食後に戻ってきます。 – BarryMode