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回调。没有办法知道是否成功加载了背景图像等待普通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?
});

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

1 个答案: