0

我为正在开发的移动网站编写了一个图片库 jQuery 插件。对于画廊中的每张图片，我都有低分辨率和高分辨率。

画廊全屏显示，每个图像最初都填充了低分辨率图像。当用户向左/向右滑动到给定图像时，我想开始安静地加载高分辨率图像，并在完成后将其与低分辨率交换。

目前这在 iOS 和 Android 上运行，但在 Windows Phone 8 上，高分辨率图像的 onload 事件似乎没有触发，因此交换永远不会发生。

代码：

var image = images[images_i];
if (image.$el && image.full && image.$el.attr('src') != image.full) {
    var fullImage = new Image();
    fullImage.onload = function () {
        image.$el.attr('src', image.full);
    };
    fullImage.src = image.full;
}

（图库生成包含每个图像 url、jQuery 对象、元数据等的“图像”哈希）

我最初也尝试在 DOM 中实际插入一个新的隐藏图像，并使用 jQuery 绑定到加载事件。但是，我发现如果图像已经被缓存，这不会一直触发，所以我不得不为 $image.prop('complete') 添加另一个检查。这在 WP8 上产生了相同的结果。

4

1 回答 1

0

显然，我的第一次尝试真的很接近，但犯了错误，弄错了事情的顺序。我在 SO 上看到的关于这个问题的所有答案只包括图像的 onload 事件处理，但没有考虑到如果 IE 已经缓存了图像，这个事件将不会触发。

完整解决方案：

var fullImage = new Image();
fullImage.onload = function () {
    $img.attr('src', fullImageUrl);
};
fullImage.src = image.full;
if ($(fullImage).prop('complete') {
    $img.attr('src', fullImageUrl);
}

如果图像已经缓存，$(fullImage).prop('complete') 将返回 true。

于 2013-02-21T17:37:48.783 回答