Как затухать после того, как страница загрузилась: Javascript

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

Как я могу включить это в мой существующий javascript?

ОБНОВЛЕНО Автор сценария:

<script type="text/javascript"> 
$(window).load(function() { 
    if (window.localStorage && !localStorage['faded']) { 
     localStorage['faded'] = true; 
     $('body').hide().fadeIn(500); 
    } 
}); 
</script>

CSS:

html { 
    background: #000; 
    height: 100%; 
} 
body { 
    background: black url(images/bg.jpg) no-repeat 200px center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    margin: 0; 
    height: 100%; 
}

источник

2013-04-27 pianoman

2,8 секунды - очень долго ждать страницы. Я рассказываю об этом только потому, что, по моему мнению, некоторые пользователи будут разочаровываться. Особенно, если им уже нужно ждать загрузки гигантского фонового изображения. Вы можете подумать о сокращении вашего fadeIn. – Elimn

Я продолжал [эту тему здесь] (http://stackoverflow.com/questions/16248387/is-using-a-fade-effect-on-page-considered-excessive-in-terms-of-design-load -время). Надеюсь, я могу получить больше информации от пользователей здесь и взвесить плюсы и минусы. – pianoman

Использование $ (окно) .load вместо $ (документ) .ready - the difference, что последний будет работать после того, как все ваши ресурсы загружены, включая изображения.

источник

2013-04-27 04:17:27

Это простое решение. Возможно, он захочет установить тело на 'display: none' на готовом документе, иначе тело исчезнет после того, как фон, наконец, загрузится, только чтобы исчезнуть. Для доступности он определенно не хотел бы спрятать тело через CSS. – Elimn

Я не заметил, что тело исчезает. Является ли это потенциальным недостатком, который пока еще не проявил себя? – pianoman

@kurzweilguy Если вы очистите свой кеш или выполните жесткую перезагрузку, вы должны заметить разницу. '$ (window) .load' не срабатывает, пока не загрузится все на странице, включая изображения. В зависимости от размера и количества ваших активов это событие может срабатывать через несколько секунд после отображения страницы; особенно при медленном подключении к Интернету. Если 'body' еще не был скрыт с помощью CSS, он будет скрываться только после фонового изображения и загрузится, а затем сразу же исчезнет. – Elimn

Как затухать после того, как страница загрузилась: Javascript

ответ

Смежные вопросы