html w3school 페이지를 표시하기 전에 브라우저에서 CSS를로드하도록합니다.




w3school track (4)

나는 내 사이트의 모바일 버전을 만들었습니다. 그러나 페이지를로드 할 때 CSS 적용없이 처음 사이트가 표시되고 1 초 후에 CSS가 적용되어 제대로 렌더링됩니다. 이 동작은 모든 브라우저 (모바일을 포함)에서 일관됩니다.

브라우저에 (우선 크기가 아주 작은) CSS를 먼저로드하고 내용 렌더링하도록 할 수있는 방법이 있습니까? head 밖에서 CSS 파일을 포함하는 것을 본 적이 있지만 사양에 위배된다는 것을 알고있는 한 일부 모바일 브라우저에서는 이러한 해킹으로 인해 문제가 발생할 수 있습니다.

감사!

최신 정보

여기에 소스가있다.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Albite BOOKS mobile</title>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8"/>
    <meta name="description" content="Free e-books for Java Mobile phones."/>
    <meta name="keywords" content="free ebooks, free books, book reader, albite reader, albite books, java mobile"/>
    <meta name="language" content="en_GB"/>
    <meta name="classification" content="public"/>

    <link rel="shortcut icon" href="favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <link href="/stylesheets/mobile.css?1289644607" media="screen" rel="stylesheet" type="text/css" />
  </head>
  <body>
  <!-- .... -->
  </body>
</html>

브라우저는 위에서 아래로 코드를 읽으므로 코드가 페이지에 올라가고 코드가 얼마나 컴팩트한지 페이지에서 로딩 시간에 영향을줍니다. 이미지 나 무언가와 같이 실제로 미리로드 할 수는 없으므로 파일을 캐싱하는 것이 좋습니다. 아마도 가장 좋은 해결책 일 것입니다. 죄송합니다 더 나은 대안이 없습니다. 그러나 솔직히 말하면 1 초의 로딩 시간은 그리 좋지 않습니다.


CSS가 다음과 같은 간단한 기술로로드 될 때까지 HTML 요소가 표시되지 않도록 할 수 있습니다.

// CSS
#my-div { display:block !important; }

// HTML
<div id = "my-div" style = "display:none;">

  <p>This will be display:none until the CSS is applied!</p>

</div>

div 태그는 display:none 을 인라인 스타일로 가지고 있기 때문에 CSS를 적용 할 때까지 표시되지 않습니다. display:block !important 규칙을 적용하면 div의 인라인 스타일이 무시되고 div가 완전히 스타일이 적용된 것으로 표시됩니다.


나는 이것을 처리하는 더 좋은 방법을 찾았다 고 믿는다 ...

출력 파일 맨 위에 다음을 입력하십시오.

<head><div id="loadOverlay" style="background-color:#333; position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:2000;"></div></head>

마지막으로로드 된 CSS 파일의 마지막 줄에 다음을 입력하십시오.

#loadOverlay{display: none;}

이것은 기본적으로 자체에 대한 문제를 사용합니다. 로드되는 디스플레이 가능한 HTML의 첫 번째 비트는 CSS가로드되고 처리되는 동안 모든 빈 위에 빈 캔버스를 놓습니다.로드 및 처리 할 CSS의 마지막 비트는 캔버스를 제거합니다. 내 테스트에서이 문제를 완전히 해결합니다.


혹시 요구 사항을 사용 했습니까? 당신은

requirejs.config(<confObj>);

이 같은

require(Array[<all your CSS & JS >]);

requirejs가 캐시를 (당신을 위해) 할 것입니다! requirejs API





browser