2012-09-25 3 views
0

저는 아약스 스크립트를 사용하는 디자인을 사용하고 있습니다. 이 스크립트는 필요한 경우 특정 페이지에 대한 콜백을 허용합니다. 디자인은 축소판 그림을 그리는 간단한 그림으로, 축소판을 클릭하면 큰 이미지를 표시 할 때 새 페이지 슬라이드가 표시됩니다. 큰 이미지의 경우 어떤 종류의 프리 로더를 사용하려고하는데, 이미지가로드 될 때 순차적으로 이미지가 흐려집니다. 내 스크립트는 아약스를 초기화하고 콜백은 다음과 같습니다jQuery로드 및 콜백이 작동하지 않습니다.

$(document).ready(function() { 

$("#menu ul li").slidingPage({ 
     easing: 'easeInOutExpo', 
     speed: 1100, 
     slideScroll: 'horizontal', 
     top: 0, 
     navigation: { 
       show: false, 
       nestedPagesFlows: true 
     }, 
     callbacks: { 

       loader: function() { 

        $(function() { 
         $(".fadein").fadeIn("slow"); 
        }); 

        $(window).load(function() { 
         $(".preload").each(function (i) { 
          $(this).delay(400 * i).fadeIn(); 
         }); 
        }); 

       } 
     } 
    }); 
}) 

HTML을 :

<div class="fadein"> 
<div id="images"> 

<h1>Title</h1> 

<div class="centre">  

<img alt="#" class="preload" src="..."> 
<img alt="#" class="preload" src="..."> 

</div> 

</div> 
</div> 

fadein 기능은 예상대로 작동하지만 preload하지 않습니다. 미리로드 된 이미지는 CSS로 숨겨져 있지만 나타나지는 않습니다. 콜백은 페이지가 새로 고쳐지면로드 된 후에 만 ​​호출됩니다. 여기서는 문제가있는 것 같습니다. 솔직하게 말해서 나는 왜 내가하고있는 것이 어떻게 든 호환되지 않는다는 것을 알지 못한다. 이 문제를 해결할 수있는 방법에 대한 조언이나 대체 방법에 대한 제안은 아마도 jQuery로 이미지를 숨길 수 있습니까? 감사합니다

+0

모든 브라우저에서이 동작이 동일하다고 가정할까요? – Sparky

+0

네, 모든 브라우저에서 똑같은 동작을합니다. – kvill

+1

'yourobject.callbacks.loader'를 사용하는 코드는 어디에 있습니까? – devnull69

답변

0

window.load 대신 jQuery의 .load() API를 사용하여 이것을 해결했습니다. 예 :

$('#selector').load(function() { 
    alert('Load was performed.'); 
}); 

가장 효율적인 방법인지는 모르겠지만 원하는 결과를 얻었습니다.

관련 문제