防止图像查看器在单击太多时挂起

Question

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

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

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

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

总而言之，我对整个Web开发的事情很新鲜，我似乎无法找到一些关于如何规避这个问题的可以理解的解释。我听说过一些关于 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");
}