Question

我正在使用.streamedImage类加载我的低分辨率图像的新高分辨率图像。每当我开始加载.streamedImage时，我会将低分辨率.previousImage作为占位符放在.streamedImage上方。这样总是可以看到图像，并且每当高分辨率完成加载时，.previousImage被移除并且高分辨率可见。

的Javascript

jQuery('.streamedImage'+imgNum).load(function() {
     jQuery('.previousImage').remove();
     jQuery('.loadingDiv').remove();
     console.log('loaded');
});

HTML

<img id="dialogPreviousImage1" class="previousImage cursorDrag" processid="372014134361312" 
     src="dialogImageStreamer.php?doc=Vortex/inProc/1438/372014134361312/imageLarge12.jpg&userName=jcAdmin&processId=372014134361312&mode=hires&x0=0&y0=0&x1=599.017&y1=791.633&resol=5.7">
<img id="dialogImage1" class="streamedImage1 cursorDrag" processid="372014134361312" 
     src="dialogImageStreamer.php?doc=Vortex/inProc/1438/372014134361312/imageLarge12.jpg&userName=jcAdmin&processId=372014134361312&mode=hires&x0=0&y0=0&x1=599.017&y1=791.633&resol=8.7">`

上述方法正常，除非我在加载.previousImage时点击低分辨率.streamedImage。为什么单击此元素会中断我的.load功能？如果我等到.streamedImage完成加载，它会运行.load功能正常。

我能做些什么来避免这个问题？

我也尝试过以下代码并遇到同样的问题：

jQuery('.streamedImage'+imgNum).on('load', function(){
   jQuery('.previousImage').remove();
   jQuery('.loadingDiv').remove();
})

SOLUTION：

伙计们，谢谢你们的帮助，如果没有它我就不会在这里。

每当我的GUI中选择了另一个工具时，我运行了一个标记为softproof.disableZoom()的js函数。在此函数中，我在图像上运行.unbind();。这反过来又阻止我的挂起加载事件被触发。

我需要特别.unbind('click'); instead of。unbind（）`。

Answer 1

看起来第二次点击会触发另一个加载事件，该事件会取消第一个加载事件。

也许你可以在图像中添加一个属性来表示你在加载的中途，如果你在后续事件中检测到该属性，忽略点击？类似的东西：

$('.previousImage').on('click', function(e) {

    if( $(this).data('loading') == true ) {
        return false;
    }

    $(this).data('loading', true);

    /* your loading logic */
});

Answer 2

是否有任何事件处理程序绑定到任何父元素？也许点击正在传播给父母，而这正是打断事情。您可以使用stopPropagation()停止此操作。

$('.previousImage').on('click', function(e) {
    e.stopPropagation();
});

点击元素后，jQuery .load（）事件被取消

2 个答案: