Question

我为我正在开发的移动网站编写了一个图片库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;
}

（图库生成'图像'哈希，其中包含每个图片网址，jQuery对象，元数据等）

我最初也尝试将新的隐藏图像插入到DOM中，并使用jQuery绑定到load事件。但是，我发现如果图像已经缓存，则不会持续触发，因此我必须为$ image.prop（'complete'）添加另一个检查。这在WP8上产生了相同的结果。

Answer 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。

图像onload事件未在Windows Phone 8上触发

1 个答案: