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

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

但是，这段代码的问题在于，如果用户想跳过一些图像并快速按下“下一步”按钮，则该站点将挂起（如果按下的次数足够多，它将无法恢复并崩溃）。当我使用

$（window.stop（）

）中断加载时，我希望能够避免这种情况，但这似乎不起作用。我也试过类似的方法

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

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

总而言之，我对整个web开发非常熟悉，我似乎无法找到一些可以理解的解释来解决这个问题。我听过一些关于ajax的内容，它允许真正的异步加载，但我也明白它并不真正适合于图像

因此，如果有人能为我提供解决此问题的方法，我将不胜感激！
稍作修改，只向next/prev按钮添加一个事件处理程序，并在请求新图像时删除DOM image元素，应该可以达到以下目的：

$(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");
}

$（函数（）{
$（“.preview a”）。单击（函数（事件）{
$（“旁白”）.show（）；
event.preventDefault（）；
showInViewer（$（本））；
});
$（“#退出”）。单击（函数（）{
$（“旁白”）.hide（）；
});
});
var last；
$（“#prev”）。单击（函数（）{
showInViewer（上一个预览版（“.preview a”）；
});
$（“#下一步”）。单击（函数（）{
showInViewer（last.next（“.preview a”）；
});
函数showInViewer（根）{
last=根；
$（“旁边的img”）.remove（）；
$（@LGSon我想了一下，但是如果我可以让用户在不离开查看器的情况下快速导航到图片（？），我会更满意。也许一个好的开始是取出
$（“#下一步”）。单击（function（）{/code>/
$（“#prev”）。单击（function（）{
在
showInViewer
函数中，并以其他方式加载该函数。主要技巧是从
showInViewer（root）
中删除事件处理程序，正如@LGSon在注释中提到的那样。。。