3

我有一种情况，当用户下载时，我们会逐步向他们展示越来越高质量的图像。

逻辑如下所示：

3 图像格式：低质量 (5-8kb)、大 (60-80kb)、高分辨率 (150-250kb)。

  1. 检查是否缓存了大或高分辨率照片，如果最初显示缓存版本并完成。
  2. 如果不加载低质量图像并立即显示给用户。
  3. 预缓存大图像并在加载后更改 img.src。
  4. 检查用户窗口大小是否超过某个阈值，预缓存高分辨率图像并在加载时更改 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

4

2 回答 2

3

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

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

clearTimeout(timeout); // cancel

查看源代码后imagesLoaded()，我找不到任何可以让您取消该功能的东西，这有点令人遗憾:(

于 2012-12-18T10:33:44.787 回答
0

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

您当前的代码非常混乱（多个计时器）并且使用了一些我们不熟悉的插件，所以我实际上不明白您是如何计时或移动到下一个图像的。但是，您需要在某个地方保持您想要下一张图像的状态，并检查完成加载的图像是否实际上是该图像。这将使您永远不会放置错误的图像。

PS我不明白为什么你的代码中有两个短暂的超时。不需要超时。您应该能够开始加载图像，然后在加载完成时采取行动，而不会超时。

于 2012-12-18T10:41:00.673 回答