Question

我正在尝试构建一些（简单的）图像查看器，以便能够以一种很好的方式从站点观看图像，并且可以在一个（部分）页面上的不同图像之间导航。到目前为止，我的代码在this jsfiddle中得到了证明。

此代码的问题在于，如果用户想要跳过一些图像并快速按下下一个按钮，则该网站会挂起（如果按下足够的话，它将不再恢复并崩溃）。我希望当我使用$(window).stop()中断加载时我能够避免这种情况，但这似乎不起作用。我也试过像

这样的东西

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

以异步方式加载图像，但这似乎也无法解决此问题。

总而言之，我在整个网络开发过程中都很新鲜，而且我似乎无法找到关于如何规避这个问题的可理解的解释。我听说过关于ajax的东西，它允许真正的异步加载，但我也明白它不适合图像......

因此，如果有人可以指导我解决这个问题的方向，那将非常感激！

Answer 1

稍微修改只添加一个事件处理程序到next / prev按钮以及在请求新图像时删除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");
}

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

1 个答案: