檢查背景圖像源是否存在，並增加計數器？

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

沒有JS回調CSS樣式。沒有辦法知道一個背景圖像是否成功加載或不等待純JS。有必要加載兩次圖像 - 一次檢查。

對於這一點，你可以使用這樣的事情：

function imageExists(image_url){ 

    var http = new XMLHttpRequest(); 

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

    return http.status != 404; 

} 

和重構代碼到圖片網址傳遞給函數。

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? 
});