2010-12-23 7 views
7

저는 아주 새로운 javascript입니다.자바 스크립트 문서 덮어 쓰기 페이지?

이미지를 미리 숨기기 전에 스타일을 추가하려면 document.write (Wordpress 포함)를 사용하여 태그를 만들려고합니다. CSS를 통해로드되기 전에 이미지를 숨기기 위해 자바 스크립트 스타일을 작성해야했습니다. 나는 사용자가 Javascript를 사용할 수 없도록 설정하고 이미지가 표시되지 않도록 CSS 파일에 실제로 기록하고 싶지 않습니다.

jQuery(function($) { 
    document.write('<style type="text/css"> .preload img { display: none; } </style>'); 
    $('#body-wrap').preloadThis(); 
}); 

을하지만, 그것은 단지 전체 페이지를 덮어하고 그 공백 만들기 :

나는 일이 코드를 얻기 위해 노력하고있어. 이걸 어떻게 막을 수 있니? 페이지를 제거하지 않고 태그를 추가하고 싶습니다. 'return'을 사용해 보았습니다. 운이 없었습니다.

죄송합니다, 저는 초보자입니다. 미리 감사드립니다.

답변

18

페이지가 완료되면 document.write()을 사용하여 implicitly calls document.open()을로드하면 새 페이지가 생성됩니다. 당신은 일반적으로 document.write()를 방지하고 적절한 DOM 생성 기술에 충실하거나, jQuery의 속기 작성 방법을 사용한다 : 나는 당신이 페이지에 의해로드 된 HTML이나 CSS 파일을 편집 할 수 있으리라 믿고있어

jQuery(function($) { 
    $('<style type="text/css"> .preload img { display: none; } </style>') 
     .appendTo("head"); 
    $('#body-wrap').preloadThis(); 
}); 


이 규칙을 포함합니까? 그 경우, 그리고 당신은 페이지 전에 적용 이러한 스타일은 jQuery를 준비 핸들러에서 document.write()을,로드가 완료하려면 다음

// write() before the document finishes loading 
document.write('<style type="text/css"> .preload img { display: none; } </style>'); 
jQuery(function($) { 
    $('#body-wrap').preloadThis(); 
}); 

이 현재 실행 <script> 태그 직후 <style> 태그를 작성합니다. 다행히도이 부분은 <head> 요소에 있으므로 <style>은 다른 브라우저에서는 사용할 수 없습니다. 모든 브라우저에서 어느 방식 으로든 구문을 분석해야합니다.

+0

.hide() 사용과 같은 문제 이미지가 캐싱 된 경우 (이전 페이지로드시로드 된 경우) jQuery가 적용되기 전에 이미지가 표시됩니다. 이로 인해 이미지가 숨겨지기 전에 표시되고 프리로드 플러그인에 의해 흐려집니다. 깜박임을 숨기기 전에 제거하려고합니다. –

+0

@Matthew : 답변을 업데이트했습니다. 페이지 로딩이 끝나지 않았다면'document.write'를 사용하는 것이 안전하므로 jQuery의 문서 준비 핸들러에서 꺼내면 OK 여야합니다. –

3

당신은 당신이 단지와 jQuery를 숨길 수 <style> 태그를 추가 할 필요가 없습니다 :

jQuery(function($) { 
    $('.preload img').hide(); 
    $('#body-wrap').preloadThis(); 
}); 
당신의 preloadThis() 기능이 작동하는 방법을 알고,하지만 난 그것을 이미지를로드에서 .preload 클래스를 제거 생각하지 마십시오

img 컨테이너. 실제로 그렇게 작동하면이 코드는 도움이되지 않습니다. 이미지는 숨겨져있을 것입니다.

+0

아니요 .preload 내의 모든 이미지를 찾아서 페이드 인합니다. .hide() 문제는 이미지를 캐시 할 때 충분히 빠르지 않아 숨겨진 이미지가 잠시 표시 될 수 있습니다. , 그 다음 그들은 퇴색한다. 멋져 보이지 않는다. –