이 페이지가로드되지 않을 가능성이 있습니까?

안녕하세요, 나는 페이지가 로딩을 끝내면 콘텐츠에 페이드 아웃되도록 페이드 효과를 웹 사이트에서 사용하고 싶습니다.이 페이지가로드되지 않을 가능성이 있습니까?

이유의 존재 때문에 모든 것을 걷어 때까지 느린 연결에 좀 지저분 볼 수 있습니다 첫 번째 것들로드 일부 절대 위치 요소이다.

그래서

내가 여기 일을 그에 코드의 비트를 발견했습니다 물론, 여기있다 :

HTML

<body id="main-content">

CSS

#main-content { 
    display: none; 
}

SCRIPT

$(document).ready(function() { 
    $('#main-content').fadeIn(); 
});

이 내가 원하는 정확히 꽤 많은,하지만 내 고민이있다; jQuery가 실행되지 않고 body css가 none을 표시하도록 설정되어있는 상황이 있습니까?

저는 완전한 jQuery newb입니다. 이것이 일어날 지 모른다고 생각합니다. 원격 라이브러리이므로 Java와 같은 브라우저에 설치할 필요가 없다고 생각합니다.하지만 그건 내가 아는 전부입니다.

미리 도움을 청하십시오.

출처

2013-06-14 number8pie

브라우저 noscript를 실행하는 사용자는 아무 것도 볼 수 없으므로 JavaScript 지원에 대한 감지 기능을 추가하는 것이 좋습니다. –

사용자가 자바 스크립트를 사용하지 않도록 설정하면 본문이 표시되지 않습니다. 하지만 그렇지 않으면 매번 fadeIn이 제대로 작동 할 것으로 예상 할 수 있습니다. – NoPyGod

_ 거기에 jQuery가 실행되지 않고 본문 CSS가 아무 것도 표시하지 않도록 설정되어있는 경우가 있습니까?_ 예, 많은 : 장애인, jQuery를 lib에로드되지, 네트워크 오류, 컴퓨터가 추락, 핵 전쟁이 시작 자바 스크립트, 세계는 매우 재미 @mishik 코멘트 : – mishik

당신은 FOUC (스타일이 적용되지 않은 내용의 깜박임을) 직면하고있다 :

은 당신이 뭔가를 할 수 있습니다. 당신은 JS 장애인 클라이언트에서 페이지를 보호하기 위해 <noscript>의 사용을 만들 수 :

<noscript> 
<style type="text/css"> 
#main-content {display: block} 
</style> 
</noscript>

뿐만 아니라 this 설명을 참조하십시오. .

출처

2013-06-14 12:20:46 OzrenTkalcecKrznaric

감사합니다. 모든 사람이 페이지를 볼 수있는 좋은 방법입니다. 스타일 시트가 호출되는 각 페이지의 헤드에 이것을 포함 시키면 JavaScript가 올바르게 작동하지 않는 경우 스타일 시트가 오버 라이드됩니까? - NEDUL MIND 나는 그것을 시험했고 작동합니다. 다시 한번 감사드립니다! – number8pie

이것은 방탄이 될 것이라고 보장 할 수 없지만'! important'로 시도 할 수 있습니다. See [http://css-tricks.com/when-using-important-is-the-right-choice/](http://css-tricks.com/when-using-important-is-the-right- 선택/) – OzrenTkalcecKrznaric

자바 스크립트를 사용하지 않는 사람들은 내 페이지를 보지 못하지만 모든 방문객 중 작은 비율을 차지합니다.

나는 "javascript를 사용하여이 웹 사이트를 볼 수 있습니다"라는 경고가있는 다른 div를 만들고 jQuery로이 div를 제거합니다.

$(document).ready(function() { 
    $('#warning').remove(); 
    $('#main-content').fadeIn(); 
});

출처

2013-06-14 12:13:23 Alex

예, JavaScript를 사용하지 않으면 사용자가 내 페이지를 볼 수 없습니다.

<body> 
    <div id='mainContent> ... </div> 
    <noscript> (alternate page for people with JS disabled) </noscript> 
</body>

출처

2013-06-14 12:14:41 Doorknob

당신은 CSS3 애니메이션, 그냥 페이드하지 않고 페이지를 표시합니다 지원하지 않는 브라우저를 사용할 수

@-webkit-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } 
@-moz-keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } 
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } 

#main-content { 
    /*run the animation only once*/ 
    -webkit-animation: fadeIn ease-in 1; 
    -moz-animation: fadeIn ease-in 1; 
    animation: fadeIn ease-in 1; 

    /*Stay at end of animation*/ 
    -webkit-animation-fill-mode: forwards; 
    -moz-animation-fill-mode: forwards; 
    animation-fill-mode: forwards; 

    /*Length of animation*/ 
    -webkit-animation-duration: 2s; 
    -moz-animation-duration: 2s; 
    animation-duration: 2s; 
}

예 - JS 장애인, 예를 들어와 http://jsfiddle.net/gpfVJ/

출처

2013-06-14 12:24:46 brian3kb

이 페이지가로드되지 않을 가능성이 있습니까?

답변

관련 문제