Question

我有一系列图片网址，每次用户按下“下一步”按钮时，我都会循环显示这些网址。但是，当遇到丢失的图像时，此循环会中断。知道循环如何继续吗？我正在使用jQuery错误函数用静态图像替换丢失的图像。循环工作完美而不会丢失图像...它只是在检测到404错误时停止。

这是我的代码示例：

var $img = $(".testImg") 
for(var i = 0; i < imgUrls.length;i++) {
    if(imgUrls[i] == $img.attr("src")) {
      if(i === (imgUrls.length-1)) {
        $img.attr("src",imgUrls[0]).error(function(){
          $(this).attr('src', 'images/missing.png')
        })
        break
      }
      $img.attr("src",imgUrls[i+1]).error(function(){
        $(this).attr('src', 'images/missing.png')
      })
      break
  }
}

解决方案（感谢下面的Jose）：

var $img = $("#vImg") 
      $img.show()
      $("#missingImg").hide()
      for(var i = 0; i < imgUrls.length;i++) {
        if(imgUrls[i] == $img.attr("src")) {
          if(i === (imgUrls.length-1)) {
            $img.error(function(){
              $("#vImg").hide()
              $("#missingImg").show()
            }).attr("src",imgUrls[0])
            break
          }
          $img.error(function(){
            $("#vImg").hide()
            $("#missingImg").show()
          }).attr("src",imgUrls[i+1])
          break
        }
      }

我确信我的代码可以做得有点整洁但是......;）

Answer 1

丢弃您的break - 语句并使用正确的if - else - 级联，如下所示：

var $img = $(".testImg");
for (var i = 0; i < imgUrls.length; i++) {
    if (imgUrls[i] == $img.attr("src")) {
        if (i === (imgUrls.length - 1)) {
            $img.attr("src", imgUrls[0]).error(function () {
                $(this).attr('src', 'images/missing.png');
            });
        } else {
            $img.attr("src", imgUrls[i + 1]).error(function () {
                $(this).attr('src', 'images/missing.png');
            });
        }
    }
}

这样，你循环运行直到结束，并且不会停止...

如果您坚持使用您的代码，则必须删除最后break语句，因为它会使for - 循环停止以防万一没有提供URL。第一个应该没问题，如果已经找到URL就可以停止循环但老实说我认为我的建议有点清晰，即使这听起来有点傲慢;）

Answer 2

您在设置网址后定义error处理程序，这是错误的。

执行此操作时：

$img.attr("src", "someInvalidURL.png").error(yourErrorHandler)

在发生404（或任何其他错误）时，永远不会调用

yourErrorHandler，因为您在更改属性error后注册src处理程序。

您需要先注册error事件，然后才会触发请求（更改src）。

$img.error(yourErrorHandlerThatWorks).attr("src", "someInvalidURL.png")

此外，每次单击下一个按钮，都会再次重新注册error事件。您可以而且应该只注册一次：

$(".testImg").error(function() {
      $(this).attr('src', 'images/missing.png')
});

然后你的下一个Button代码可以是：

for(var i = 0; i < imgUrls.length;i++) {
    if(imgUrls[i] == $img.attr("src")) {
      if(i === (imgUrls.length-1)) {
        $img.attr("src",imgUrls[0])
        break
      }

      $img.attr("src",imgUrls[i+1])
      break
  }
}

编辑：

现在我明白为什么你的下一个按钮停止工作了。

如果您遇到错误，则将$ img网址设置为images/missing.png。然后，显然，＆＃34;下一步＆＃34;按钮永远不会执行任何操作，因为条件imgUrls[i] == $img.attr("src")将始终为false（该条件将作为imgUrls[i] == "images/missing.png"。

您需要在错误处理程序中执行其他操作，例如使用另一个<img>，其中缺少的图像始终是隐藏的，只有在出现错误时才会显示。

循环通过图像阵列和循环中断与丢失的图像

2 个答案: