jquery - 防止图像查看器在点击太多时挂起

Question

我正在尝试构建一些(简单的)图像查看器，以便能够以一种很好的方式观看来自站点的图像，并且可以在一个(部分)页面上的不同图像之间导航。到目前为止，我的代码在 this jsfiddle 中进行了演示。 .

但此代码的问题在于，如果用户想跳过一些图像并快速按下下一步按钮，网站就会挂起(如果按下得足够多，它就不会再恢复并崩溃)。我希望在使用 $(window).stop() 中断加载时能够避免这种情况，但这似乎并不能解决问题。我也试过类似的东西

$(<img>).load(function() {
    $("aside img").attr("src", $(this).attr("src"));
}).attr("src", root.attr("href"));

异步加载图片，但这似乎也不能解决这个问题。

总而言之，我对整个网络开发这件事还很陌生，我似乎无法找到一些可以理解的解释来解决这个问题。我听说过一些关于 ajax 的事情，它允许真正的异步加载，但我也知道它不太适合图像......

因此，如果有人可以指导我解决这个问题，将不胜感激!

Answer 1

稍微修改一下，只向下一个/上一个按钮添加一个事件处理程序，并在请求新图像时删除 DOM 图像元素应该可以解决问题:

$(function() {
  $(".preview a").click(function(event) {
    $("aside").show();
    event.preventDefault();
    showInViewer($(this));
  });
  $("#exit").click(function() {
    $("aside").hide();
  });
});

var last;
$("#prev").click(function() {
  showInViewer(last.prev(".preview a"));
});
$("#next").click(function() {
  showInViewer(last.next(".preview a"));
});

function showInViewer(root) {
  last = root;
  $("aside img").remove();
  $("<img></img>").attr("src", root.attr("href")).appendTo("aside");
}