Question

我正在开发一个需要抛光的强大功能，这个问题有点偏僻，但我很想知道我想要的是否可能。

这是交易，照片浏览器：

http://www.jungledragon.com/image/2748/fierce_crested_caracara.html/zoom

有效。现在我正在开发一个新功能（尚未在该示例中部署）。这是一个“高清”功能。单击时，它会将屏幕上的大图像源切换为原始格式。这意味着图像源将在上传时替换为图像，这意味着图像分辨率和文件大小非常高。结果是超清晰的照片观看，即使在大型显示器和电视上也是如此。

这是我的代码的预加载部分：

$("#HD").live('click', function(e) {
    var imageID = $("#bigimage img").attr('id');

    $.post(basepath + 'image/' + imageID + '/hd',function(data) {
        var imagePreloader = new Image();
        imagePreloader.src = data;
        $(imagePreloader).imagesLoaded(function() {
            var img = $("#bigimage img");

            // set the image src, this effectively shows the image
            img.attr({ src: data });
        });
    });

    e.preventDefault();
});

此代码将首先检索受保护的原始图像的URL。接下来，它将预加载该图像，完成后，调整大图像的来源，将其替换为原始大小的图像URL。

所有这一切都很好。问题是，一旦加载了图像并且我设置了新的src属性，屏幕上图像的实际“绘图”需要几秒钟。你可以看到它垂直构建像素。我宁愿将较小的图像替换为大爆炸中的高分辨率而不是这种渐进渲染。

是否可以检测图片何时不仅被加载，还被渲染？

更新：进行了一些浏览器测试并注意到图片“构建”的问题仅发生在Firefox（目前使用的是8.0）中，但不会出现在Chrome，Safari，Opera或IE9中。这样就可以将我的问题减少到FF了。

Answer 1

图像对象具有布尔属性“完成”，用于确定图像是否已完成加载（成功或失败/错误）。

您也可以找到这个有用的jQuery loading images with complete callback

我可以检测到大型预装载图像何时不仅被加载，而且还完全可见？

1 个答案: