jQuery 이미지 슬라이더를 초기화하는 동안 로더를 표시합니다.

Question

안녕하세요. this wonderful jQuery slider을 사용하여 큰 이미지 갤러리를 만들었으며 포함하고있는 슬라이드 수를 고려할 때 초기로드 시간이 중요합니다. 나에게 기본 로딩 애니메이션 div - eg를 통합하는 간단한 방법. "loading gallery .."텍스트가있는 회 전자 - 슬라이더가 완전히로드되면 숨겨져 있습니까? 처음으로로드 div를 표시하도록 DOM을 지시 할 수있는 방법이 있는지 궁금하고, 슬라이더의 콜백 함수 중 하나를 사용하거나 jQuery (?)를 통해 완전히 초기화 할 때 div를 꺼내겠습니까? 궁극적으로 스크립트, 마크 업 및 축소판이 브라우저에로드된다는 것을 5 ~ 10 초 동안 사용자에게 표시하려고합니다 (지연로드 기능을 사용하기 때문에 적어도 처음에는 전체로드하지 않습니다. 이미지 크기를 조정하십시오.)

감사합니다.

Answer 1

다음과 같이 할 수 있지만 테스트되지 않았 음을 명심하십시오.

JS

$(window).load(function(){ 
    // initialize slider. 
    // remove loading_image image as below 
    $('img#loading_image').remove(); 
});

HTML

는이 코드가 무슨 도움이 될 것입니다

<div><img src="loading.jpg" alt="" id="loading_image" /></div> 
<div><img src="image.jpg" class="hide" alt="" /></div> 
<div><img src="image.jpg" class="hide" alt="" /></div> 
<div><img src="image.jpg" class="hide" alt="" /></div> 
<div><img src="image.jpg" class="hide" alt="" /></div>

CSS

#loading_image { display: block; other css code. } 
.hide { display: none; }

희망은 해제입니다 til 페이지가 완전히로드되면 이미지로드를 제외한 모든 슬라이더 이미지가 숨겨지고 한 번만 페이지가 완전히로드되어 필요한 모든 이미지가로드됩니다.