JQuery로 DIV에 통화 중 표시기 표시

통화 중 표시기로 사용하려는 애니메이션 .gif가 있습니다. 일부 콘텐츠가로드되는 동안이 통화 중 표시기가 사용됩니다.JQuery로 DIV에 통화 중 표시기 표시

로드되면 콘텐츠가 div 내에 표시됩니다. 콘텐츠가로드되는 동안 기본적으로 애니메이션을 표시하는 기존 콘텐츠 위에 반투명 레이어가 있습니다. .GIF.

<div id="main"> 
    <div id="contentArea"> 
    Loaded content will go here 
    </div> 
    <input type="button" value="Load Latest Content" onclick="loadContent();" /> 
</div>

그리고 스크립트는 다음과 같습니다 :

<script type="text/javascript"> 
    function loadContent() { 
    // Show busy indicator on semi-transparent layer. 
    pingWebService(); 
    return false; 
    } 
    function pingWebService() { 
    $.ajax(...); 
    } 
    function pingWebServiceComplete() { 
    // Hide busy indicator 
    } 
</script>

내가 내 .ajax 전화가 잘 작동이 현재, 나는 다음 있습니다. 나는 바쁜 표시기 부분을하는 방법을 모르겠습니다.

$("#MyBusyElement").show();

및

$("#MyBusyElement").hide();

나머지는 당신의 HTML/CSS 레이아웃에 다운 :

출처

2012-10-08 user70192

시도 블록 ui http://www.malsup.com/jquery/block/ – abhijit

멋진 플러그인. 감사! – user70192

감사합니다. 기쁜 데 도움이되었습니다. – abhijit

musefan이 말한 것처럼 간단하게 이미지를 포함하는 div를 숨기거나 표시하십시오. 여기에 고안된 example입니다.

출처

2012-10-08 15:22:19

재미있게도 [피들 발음] (http://jsfiddle.net/4AQx6/4/);) – musefan

JQuery와 만/표시 같은 일을 할 수있는 표시 이미지를 숨길 필요가있다. CSS에서 투명도를 사용할 수는 있지만 이전 브라우저에서는 올바르게 지원되지 않으므로 div을 덮을 투명 배경이있는 "바쁜"gif가 있거나 이전 브라우저에서 완전히 불투명 한 표지가됩니다. 이것은 오래된 브라우저를 사용하는 사람들이 겪어야 만합니다!)

출처

2012-10-08 15:01:42 musefan

조심하십시오. 애니메이션 GIF를 숨기면 IE8 (IE9도 마찬가지 임)은 숨겨진 현재 보이는 div에 애니메이션을 표시 할 수 없습니다. 이미지가 그대로 나타납니다. – Alfabravo

@ Alfabravo : 당신도 IE를 지원해야한다는 것을 의미합니까?!?! ... 농담하는, 나는 결코 이것을 보지 않고 있었다. 설명하기 위해 JSFiddle (또는 다른 소스)을 제작할 수 있습니까? – musefan

내 0.02 : 나는 "로딩"애니메이션 GIF를 사용하는 webapp를 사용했다. 그것은 내가 필요에 따라 눈에 보이지 않게 숨겨진 숨겨진 div에있었습니다. 그것은 잘 작동하지만 IE는 (나는 그것이 7 또는 8 일 경우 명확하게 기억할 수 없다) gif를 보여 주었고 클라이언트는 "사이트 작동이 멈췄다"와 같이 보였기 때문에 불평했다. 내가 jsfiddle 빌드를 시도하자 ... – Alfabravo

JQuery로 DIV에 통화 중 표시기 표시

답변

관련 문제