图像加载事件未在 Windows Phone 8 上触发答案

【问题标题】：Image onload event not firing on Windows Phone 8图像加载事件未在 Windows Phone 8 上触发
【发布时间】：2013-02-20 16:53:13
【问题描述】：

我为正在开发的移动网站编写了一个图片库 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 上产生了相同的结果。

【问题讨论】：

我知道 IE 有一个问题，如果图像被缓存，onload 事件将不会触发。解决方法是检查是否有高度，如果有，则图像已加载，您可以调用 onload 方法。

标签： javascript jquery html windows-phone-8 windows-phone

【解决方案1】：

显然，我的第一次尝试真的很接近，但犯了错误，弄错了事情的顺序。我在 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。

【讨论】：