저는 아약스 스크립트를 사용하는 디자인을 사용하고 있습니다. 이 스크립트는 필요한 경우 특정 페이지에 대한 콜백을 허용합니다. 디자인은 축소판 그림을 그리는 간단한 그림으로, 축소판을 클릭하면 큰 이미지를 표시 할 때 새 페이지 슬라이드가 표시됩니다. 큰 이미지의 경우 어떤 종류의 프리 로더를 사용하려고하는데, 이미지가로드 될 때 순차적으로 이미지가 흐려집니다. 내 스크립트는 아약스를 초기화하고 콜백은 다음과 같습니다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로 이미지를 숨길 수 있습니까? 감사합니다
모든 브라우저에서이 동작이 동일하다고 가정할까요? – Sparky
네, 모든 브라우저에서 똑같은 동작을합니다. – kvill
'yourobject.callbacks.loader'를 사용하는 코드는 어디에 있습니까? – devnull69