背景イメージソースが存在するかどうかを確認し、カウンタが増加しているかどうかを確認しますか？

Question

私は自分のサイトにバックグラウンドイメージソースにカウンタを持っているイメージギャラリーを持っています。ボタンをクリックすると、カウンタがアップして背景イメージが変わります。

しかし、イメージファイルが存在しない場合は、カウンタをリセットします。

これをどのように達成できますか？

HTML

<div></div> 
<button>click</button> 

Javascriptを

var div = document.querySelector("div"); 
var button = document.querySelector("button"); 

var counter = 1; 

div.style.backgroundImage = "url(image1.jpg)"; 

button.addEventListener("click", function() { 
    counter++; 
    div.style.backgroundImage = "url(image" + counter + ".jpg)"; 
    console.log(counter + " " + div.style.backgroundImage); 

    if (div.style.backgroundImage === undefined) { counter = 1 } // something like this? 
}); 

Answer 1

CSSスタイルのためのJSコールバックはありません。背景画像が正常に読み込まれたかどうかを知る方法はありません。画像を2回読み込む必要があります。

function imageExists(image_url){ 

    var http = new XMLHttpRequest(); 

    http.open('HEAD', image_url, false); 
    http.send(); 

    return http.status != 404; 

} 

をAND関数に画像のURLを渡すようにコードをリファクタリング：

そのために、あなたはこのようなものを使用することができます。

var div = document.querySelector("div"); 
var button = document.querySelector("button"); 

var counter = 1; 

div.style.backgroundImage = "url(image1.jpg)"; 

button.addEventListener("click", function() { 
    counter++; 
    var imageUrl = "image" + counter; 
    if (imageExists(imageUrl)){ 
    //Image can be loaded 
    div.style.backgroundImage = "url(image" + counter + ".jpg)"; 
    console.log(counter + " " + div.style.backgroundImage); 
    } else { 
    //Image cannot be loaded 
    counter = 1; 
    div.style.backgroundImage = "url(image" + counter + ".jpg)"; 
    } 
    // something like this? 
});