Firefox는 이미지를 검색 할 때 이미지를 표시합니까?

아래 테스트 코드가 있습니다. Firefox가 첫 번째 이미지를 표시하고 지연을 실행하고 두 번째 이미지의 검색을 일시 중단 한 다음 "Hello"및 두 번째 이미지를 표시 할 것으로 예상했습니다.Firefox는 이미지를 검색 할 때 이미지를 표시합니까?

지연 후 모든 것을 한 번에 표시하는 이유는 무엇입니까?

업데이트 : 더 자세한 설명이 필요합니다. 나는 생산 코드를 쓰려고하지 않는다. 나는 브라우저가 완료 될 때까지 js 스크립트의 실행을 일시 중단 한 다음 스크립트 태그 다음에있는 것이 무엇이든 계속 표시한다는 것을 읽었습니다. 여기에는 다른 브라우저 연결에서 이미지를 검색하는 것도 포함됩니다. 나는 그것이 실제로 일어나는 것과 그렇지 않다는 것을 증명하려고 노력하고 있습니다.

<body> 
<img src="images/web.gif" /><br /> 
<script type="text/javascript"> 
    document.body.innerHTML = ""; 
    for (var i = 0; i < 1000000000; i++) { 
    } 
    document.write("hello<br />"); 
</script> 
<img src="images/web2.gif" /><br /> 
</body>

출처

2010-02-12 Tony_Henrich

Firefox는 로딩 시간을 개선하기 위해 이미지를 프리 페칭합니다.자바 스크립트를 사용하여 이미지를로드하거나 해석 할 HTML 만 보내는 서버 측에서 버퍼링을 고려하십시오. – Killroy

@ 킬 로이가 내 업데이트를 참조하십시오 –

질문과 관련하여 http://www.stevesouders.com/blog/2010/02/10/5b-document-write-scripts-block-in-firefox/이 있습니까? –

모든면에서 ... 타이머와 같은 루프를 사용하면 내가 믿는 모든 것의 위반입니다! (나는 여기에 윙크하는 스마일이 있어야하는지 모르겠다. 왜냐하면 나는 그것이 당신을 모욕하는 것이 아님을 의미하기 때문이다.)

자바 스크립트에 타이머 객체가있다. jQuery를위한 몇 가지 플러그인이있다. 그들 중 하나. 왜냐하면 파이어 폭스는 루프를 아무 것도 최적화하지 않거나 실행 속도가 매우 빠르기 때문이다.

편집 : 두 번째로 생각해 보면 Firefox는 JavaScript를 실행하기 전에 전체 문서를 먼저로드하는 것이 가장 가능성이 높습니다.

출처

2010-02-12 08:55:58 Bobby

그의 질문은 지연에 관한 것이 아니 었습니다 ... – Killroy

이것은 여전히 끔찍한 일이라는 것을 지적하기 위해 상처를주지는 않습니다 - 답변보다는 주된 질문에 대한 코멘트에 더 적합하지만. – Erik

@ 킬로이 : 그의 질문은 지연에 관한 것입니다. 그리고 내가 말했듯이 파이어 폭스는 루프를 아무 것도 최적화하지 않고 너무 빨리 실행하거나 자바 스크립트를 실행하기 전에 먼저 전체 문서를로드한다고 생각한다. – Bobby

글쎄, 스크립트 부분에서 document.write를 인라이닝하는 것은 실제로 브라우저가 다른 것들을 출력 할 수 있기 때문에 실제로 해석합니다. 나머지는 무효화하는 주석 시작 (<!--)을 포함합니다.

페이지로드를 차단하는 자바 스크립트 실행을 피하려면 외부 파일과 defer 속성을 사용해야합니다. 브라우저가 계속 페이지를 렌더링 할 수 있도록이이 스크립트는 바로 해석 할 필요가 없습니다 브라우저를 말할 것이다 :

<script type="text/javascript" src="delay.js" defer="defer"></script>

을하지만, 당신이 문서로 출력을 인라인 할 수 없습니다 그렇게합니다. 당신의 예에서했던 것처럼 글쓰기. 하지만 그건 문제가되지 않아야합니다. 같은 위치에 a를 추가하고 스크립트에 다음을 추가 할 수 있습니다. 당신이 스크립트에 defer를 사용하는 경우

document.getElementById("output").innerHTML = "Hello";

또한, 다음 스크립트의 변수는 (명백한 이유를 위해, 그들은 아직로드되지 않을 수 있습니다!) 바로 앱에서 다른 비 연기 스크립트 블록을 사용할 수 없습니다.

둘째, 지연을 에뮬레이트하기 위해 루프를 사용하지 마십시오. 나는 그것이 얼마나 나쁜지 강조하지 못한다. 나는 당신이 단순함을 위해서 그것을 사용했다고 가정합니다.

출처

2010-02-12 09:03:49

원하는대로 할 수 있습니다. jQuery 라이브러리를 사용하여 쉽게 작성하므로 Google에서도로드 할 수있는 문장을 포함시켰다.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script> 
    // This won't execute until the page has actually loaded 
    $(document).ready(function() { 
    // The number is miliseconds; in this case a 5 sec wait 
    // and the text is the name of the function to call. 
    window.setTimeout(addImage,5000); 
    }); 

    function addImage() { 
    $('body').append('<img src="book.jpg" />'); 
    } 
</script>

이렇게하면 목표를 달성 할 수 있습니다. 페이지가로드 된 후 5 초 (또는 지정한 시간에 관계없이) 기다린 다음 두 번째 이미지를 추가합니다 (데스크톱에서이 이미지가 제대로 작동하는지 확인하기 위해 동일한 이미지를 두 번 사용했습니다).

출처

2010-02-12 09:58:01 Erik

내 업데이트를 참조하십시오. 페이지가로드되는 동안 스크립트를 실행해야합니다. –

Firefox는 이미지를 검색 할 때 이미지를 표시합니까?

답변

관련 문제