jquery - 使用 jQuery Mobile(iPhone 4 上的移动 Safari)在 HTML5 网络应用程序上首次显示隐藏图像时出现黑色闪烁

Question

我们正在使用 jQuery Mobile 为 iOS 设备创建网络应用。

在 iPhone 上的测试中，我们注意到首次通过 jQuery(例如，显示、淡入)显示的隐藏图像在图像加载到元素之前会暂时显示为黑色。

根据其他 SO 帖子的建议，我们将图像作为背景图像加载到元素中，这使我们能够考虑 Retina 与非 Retina 显示器。

我们认为这与其他 SO 帖子中描述的闪烁问题无关，因为我们已经实现了“ui-page”解决方案。

我们怀疑这是因为 jQuery 只首先加载可见的背景图像。当然，我们可以通过在屏幕外显示元素来解决这个问题，但我们想知道是否存在更优雅的解决方法。

Answer 1

您可以通过创建 Image 对象并设置它们的 src 来预加载 CSS 背景图像。这将在后台发出请求并缓存它(至少在桌面浏览器中，我没有 iPhone 可以测试)。 CSS 背景图像在显示之前不会单独加载，afaik。

var imageSources = ["/images/1.png", "/images/2.png", "/images/3.png"];

jQuery.each( imageSources,
    function( index, src ) {
    var img = new Image();

        img.onload = function(){
            if( this.isLoaded ) {
            return;
            }
        this.isLoaded = true;
        jQuery ( document ).trigger( "imageloaded", [this.src] );
        };

    img.src = src;

        if( ( img.complete || img.readyState === 4 ) && !img.isLoaded ) {
        img.onload();
        }

    }
);


jQuery( document ).bind( "imageloaded",
    function( e, src ) {
    //div with background-image url == src can be displayed
    }
);

编辑:运行了一些测试并且 firefox 没有加载背景图片直到它被显示而 google chrome 无论如何加载它:

[00:13:44.087] document.getElementById("e").style.display = "block";
[00:13:44.090] "block"
[00:13:44.102] GET http://codinghorror.typepad.com/.a/6a0120a85dcdae970b012877702708970c-pi

CSS

#e{
background-image: url('http://codinghorror.typepad.com/.a/6a0120a85dcdae970b012877702708970c-pi');
display: none;
}