Question

我的情况是，我们会在下载时逐渐向用户显示越来越高质量的图像。

逻辑如下：

3图像格式：低质量（5-8kb），大（60-80kb），高（150-250kb）。

检查是否缓存了大或高分辨率照片，如果这样，最初只显示缓存版本和完成。
如果没有加载低质量图像并立即显示给用户。
预先缓存大图像并在加载后更改img.src。
检查用户窗口大小是否超过某个阈值，预先缓存高图像并在加载时更改img.src。

一切都很美妙。

然而，在高分辨率下载期间，如果用户点击进入下一个图像，由于我们已设置事件在上一个高分图像加载时发生onload，所以一切都会搞砸。

基本上onload事件发生在用户已经点击进入下一个图像之后，意味着新图像被旧图像替换。

我需要做的是能够在用户切换到下一张照片时取消该功能。

该功能如下所示：

(function(index){
        $(highresimage).imagesLoaded(function(){
                    setTimeout(function(){
                        self.cache.image = $(highresimage).appendTo(self.cache.imagewrap);
                        self.cache.photos[index]['highresloaded'] = true;
                        setTimeout(function(){
                        self.cache.imagewrap.children('img').first().remove();
                        self.cache.image.css({
                            'left':'',
                            'position':'relative'
                        });
                        },10);
                    },200);
        });
})(index);

所以我需要能够以编程方式取消$(highresimage).imagesLoaded(function(){});

实现这一目标的最佳方式是什么？

提前致谢。

编辑：请注意，在我的示例中，我们实际上是克隆图像，更改src，将其添加到dom，留下几毫秒然后删除旧图像。这归结为Firefox中的一个错误，当更改高分辨率图像的src时会导致闪烁。尽管很糟糕，删除丑陋的超时会让Firefox的用户体验更糟糕。他们是有原因的。：P

Answer 1

如果您将setTimeout保存在变量中，则可以使用clearTimeout取消它。从理论上讲，应该中止图像的加载。

var timeout = setTimeout(do_something, 1000); // create

clearTimeout(timeout); // cancel

在查看the source code of imagesLoaded()之后，我找不到任何允许你取消该功能的东西，这有点无聊:(

Answer 2

对于给定的图像，您需要跟踪您正在等待的最新图像。然后，当您曾经等待完成加载的其他图像时，您可以看到完成加载的图像是否仍然是您正在等待的。如果没有，你只需忽略它完成加载的事实。如果是这样，您将当前图像替换为您正在等待的图像。

您当前的代码非常混乱（多个计时器）并且使用了一些我们不熟悉的插件，所以我实际上并不了解您是如何计时或转移到下一个图像。但是，在某个地方你需要为你想要的下一个图像保持状态，并检查一下完成加载的图像是否真的是那个图像。这样可以防止您将错误的图像放置到位。

P.S。我不明白为什么你的代码中有两个短暂的超时。不需要超时。您应该能够开始加载图像，然后在加载完成时立即执行操作。

在javascript / jQuery中使用外部事件取消函数

2 个答案: