第一次在HTML5 web应用上显示隐藏图像时出现黑色闪烁，使用jQuery Mobile (iPhone 4上的移动S

Question

我们正在使用jQuery Mobile为iOS设备创建一个web应用。

在iPhone上的测试中，我们注意到第一次通过jQuery出现的隐藏图像(例如，show, fadeIn)会在图像加载到元素之前瞬间呈现黑色。

根据其他SO帖子的建议，我们将图像加载为元素的背景图像，这允许我们考虑视网膜与非视网膜显示。

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

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

Answer 1

您可以通过创建Image对象并设置其src来预加载CSS背景图像。这将在后台发出请求并缓存它(至少在桌面浏览器中是这样，我没有iPhone来测试)。CSS背景图片只有在显示出来的时候才会被加载。

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
    }
);

edit:我进行了一些测试，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;
}