javascriptで、画像ファイルのURLを指定して、あれば表示なければ表示しないようにする
今回はWordPressではなく、Javascriptのお話。
商品マスタと、商品コード.jpgの画像群があり、
ただ、全部の画像が揃っているわけではなくて、画像のあるものもあればないものもある。
データ側で突き合わせをすればよいかとも思ったのですが、
画像があれば表示、なければ表示しないようにしたいと思い、よい方法がないが探してみました。
画像があるかないかが判断できれば、表示するかしないかはif文一発だと思ってたのですが、これがなかなかうまくいかない。
ボタンを押したら表示するとか、複数画像をチェックするとかやたら長いスクリプトはあるのですが、もっと単純にあれば表示、なければ何もしないっていう簡単なものを探して、
ファイルサイズを取得して、エラー（-1）以外なら表示するというサンプルを見つけたのですが、
fsizeの中身はundefindになっていて-1も0も帰ってこない。
var gazou = “http://www.yahoo.co.jp/aaa.jpg”;
var fsize=gazou.fileSize; // ファイルサイズを取得
if(fsize != -1) {
document.write(‘<ｉｍｇ src="画像url">‘);
onloadを使ったシンプルなものがあって、arartの部分を変えて使えるかと思いきや、ダメ。
何かやりかたはあるんだろうけど私にゃわからない。。
myimg = new Image() ;
myimg.onload = function() {alert(‘読み込み成功’) ; }
myimg.onerror = function() {alert(‘読み込み失敗’) ; }
myimg.src = 画像url’ ;
最後にいきついたのがこれ。
とにかく指定されたurlを読みにいって、404で判断すりゃいいじゃんというもの。
画像だけでなく、urlならオールマイティーに使えそう。
var url = ‘画像URL’ ;
var xhr = new XMLHttpRequest();
xhr.open(“HEAD”, url, false);
xhr.send(null);
var status = xhr.status;
if ( status != 404 ) {
document.write(‘<ｉｍｇ src="画像url">‘);
}
すばらしい！
