检查背景图像源是否存在，并增加计数器？

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