이미지로드로 DIV 미리로드

Question

문제가 있습니다. 나는 CMS에서 일하고 있습니다, 그 이름은 돌고래입니다. 몇 마디로 나는 무거운 코드 (jQuery, 자바 스크립트, PHP, HTML, 이미지 등 ..)를 포함하는 블록을 만들었습니다. 내가하고 싶은 일은이 블록의 콘텐츠가 완전히로드 될 때까지로드 이미지를 표시하는 것입니다. 그래서 이상하게 보일지라도, 나는 DIV를위한 프리로드 함수가 필요하다. 나는 그것을 사용하지 않으면 div가 천천히 구성되는 것을 볼 수 있기 때문에 그것을해야합니다. 그리고 그것은 끔찍합니다. 이걸 도와 줄 수있는 좋은 jQuery 또는 자바 스크립트 함수를 알고 있습니까? 내용이 완전히로드 될 때까지 DIV의 중심에 이미지를로드하는 것입니다. 로드되면 바로 표시됩니다 .. 감사합니다!

Answer 1

트릭은 기본적으로 숨겨진 실제 div를 설정하고 "잠시 기다려주세요"div. "무거운 코딩 끝에서"Please wait "div를 숨기고 실제 하나를 표시하는 줄을 추가하십시오.

필요한 HTML의 샘플 코드 :

<div id="pnlPleaseWait"> 
    Loading please wait... 
<div> 
<div id="pnlMain" style="display: none;"> 
    ....heavy stuff going on here... 
    ....heavy stuff going on here... 
    ....heavy stuff going on here... 
</div> 

그리고 무거운 처리의 끝에서 jQuery를 라인 :

$("#pnlPleaseWait").hide(); 
$("#pnlMain").show(); 

Answer 2

확인 다른 질문 :

How to show loading spinner in jQuery?

How do I display an animated image during Page Load using jQuery

등