Страницы, мигающие белым цветом в Safari при загрузке или перезагрузке контента без необходимости - PullRequest
Новая
       23

Страницы, мигающие белым цветом в Safari при загрузке или перезагрузке контента без необходимости

2 голосов
/ 15 декабря 2011

Мне интересно, что может вызвать кратковременное мигание страницы белым при переходе от страницы к странице на веб-сайте, который я проектирую в Safari (вы можете увидеть веб-сайт здесь ).В дополнение к этому иногда происходит мигание, логотип и навигационная панель также перезагружаются (кратковременно исчезают и исчезают), когда они должны оставаться неподвижными.В Firefox это то, что происходит, но в Safari (в основном) и Chrome иногда я вижу мерцание и перезагрузку.Я использую этот сценарий для добавления содержимого div (то есть всего, что находится ниже панели навигации) на немобильных устройствах, но это не является причиной, поскольку я пытался закомментировать сценарий и по-прежнему вижу поведение: 

<script>

$(document).ready(function(){

    if ( screen.width <= 699 ) {
    } else {
         // your script
    document.getElementById('content').style.display = "none";
    $('#content').fadeIn(1000);
    }

});
</script>-->

Мне интересно, что еще я могу попытаться получить более плавный переход.Раньше все работало нормально, но сейчас не по какой-то причине.У меня очень хорошее интернет-соединение.

Спасибо за любую помощь,

Ник

Ответы [ 2 ]

3 голосов
/ 15 декабря 2011

Я не вижу белую вспышку, хотя понимаю, почему это происходит: ваша страница загружается #content, затем ваш JavaScript скрывает #content, затем ваш JavaScript заставляет #content исчезать. 

$(document).ready(function(){

    if ( screen.width <= 699 ) {
    } else {
         // your script
    document.getElementById('content').style.display = "none";
    $('#content').fadeIn(1000);
    }

});

Кстати, 

document.getElementById('content').style.display = "none";

... можно заменить на ... 

$('#content').css('display', 'none');

... что "примерно эквивалентно" до .hide() ... 

$('#content').hide();

... затем объединяется со следующей строкой (называемой цепочкой) ... 

$('#content').hide().fadeIn(1000);

Но это не решает проблему с белой вспышкой.

Так почему бы не попробовать сделать #content скрытым по умолчанию в CSS ... 

#content {
   display: none;
}

И просто используйте JS, чтобы затенить его ... 

$(document).ready(function(){

    if ( screen.width <= 699 ) {

    } else {
         // your script
        $('#content').fadeIn(1000);
    }

});

Конечно, если бы я знал, чего именно вы пытаетесь достичь, я мог бы дать лучшую рекомендацию.

EDIT:

CSS: 

#content {
    display: none;
}

@media screen and (max-device-width: 699px) {
    #content {
        display: block; 
    }
}

JavaScript: 

$(document).ready(function(){
    $('#content').fadeIn(1000);
});
1 голос
/ 15 декабря 2011

вы рендерите его, скрывая его, вы также смешиваете js selection и jquery selection, почему бы не использовать css, чтобы скрыть это. 

//css
 #content {display:none;}
// use media query for css detect mobile
@media only screen and (max-device-width: 480px) {
#content {display:block;}
}

//js
$(document).ready(function(){
    $('#content').fadeIn(1000);

});
...