Мерцание черного при отображении скрытого изображения впервые в веб-приложении HTML5 с jQuery Mobile (Safari для мобильных устройств на iPhone 4) - PullRequest
Новая
       0

Мерцание черного при отображении скрытого изображения впервые в веб-приложении HTML5 с jQuery Mobile (Safari для мобильных устройств на iPhone 4)

1 голос
/ 19 октября 2011

Мы используем jQuery Mobile для создания веб-приложения для устройств iOS.

При тестировании на iPhone мы заметили, что скрытые изображения, которые появляются через jQuery (например, show, fadeIn), будутНа мгновение отображаются черным, прежде чем изображение загружается в элемент.

По совету других сообщений SO мы загружаем изображения в качестве фоновых изображений в элемент, что позволяет нам учитывать дисплеи Retina и не Retina.

Мы не считаем, что это связано с проблемой мерцания, описанной в других публикациях SO, поскольку мы уже реализовали решение "ui-page".

Мы подозреваем, что это связано только с jQuery.Сначала загрузите видимые фоновые изображения.Мы можем взломать это, конечно, показав элементы за кадром, но мы задаемся вопросом, существует ли более элегантный обходной путь.

1 Ответ

0 голосов
/ 19 октября 2011

Вы можете предварительно загрузить фоновые изображения CSS, создав объекты Image и установив их src.Это сделает запрос в фоновом режиме и кеширует его (по крайней мере, в настольных браузерах у меня нет 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;
}
...