在帶有jQuery Mobile的HTML5 Web應用上首次顯示隱藏的圖像時，黑色閃爍（iPhone 4上的移動Safari）

Question

我們正在使用jQuery Mobile為iOS設備創建一個Web應用程序。

在iPhone上進行測試時，我們注意到，通過jQuery首次顯示的隱藏圖像（例如show，fadeIn）將在圖像加載到元素中之前暫時呈現黑色。

根據其他SO帖子的建議，我們將圖像作為背景圖像加載到一個元素上，這使我們能夠考慮Retina和非Retina顯示。

我們已經實現了“ ui-page”解決方案，因此我們認為這與其他SO帖子中描述的閃爍問題無關。

我們懷疑這是由於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在直到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;
}