0
내 쿼리의 게으름에 사과는보다 구체적으로하려고합니다.모든 요소가로드 된 후에 만 오버레이 div를 페이드 인할까요?
OK- 다른 모든 작업을 수행하고 html의 모든 이미지를로드 한 후에 fadeIn이 시작된다는 것을 보장 할 수 있도록 아래 코드를 어떻게 수정합니까? js를 통해 콜백을 통해 이미지를로드해야합니까? $ (window) .load()에있는 일부 코드. 문서 준비 대신에?
fadeIn이 비동기식으로 호출되는 순간 (추측) - 이미지로드 중일 때 .ovwrapper가 사라지는 경우가 있습니다. 다음은 ajax 스크립트에 의해로드 된 html의 머리 부분에 준비된 문서입니다.
//Reset overlay elements
$("#ov-image1"+bellcat).show();
$("#ov-image2"+bellcat).hide();
$("#ov-image3"+bellcat).hide();
$("#ov-video"+bellcat).hide();
$("#ovtext"+bellcat).hide();
$("a#clicktxt").removeClass("highlight");
$("a#clickimg1").addClass("highlight");
$("a#clickimg2").removeClass("highlight");
$("a#clickimg3").removeClass("highlight");
$("a#clickvid").removeClass("highlight");
//Fade in overlay inner wrapper
$(".ovwrapper").fadeIn("slow");
//Resize 1st image in relation to height of image-wrapper
$(function(){
var wh = $(window).height();
var hh = $("#ovheader-wrapper"+bellcat).height();
var nh = $("#ovfooter-wrapper"+bellcat).height();
var ch = wh - (hh + nh);
$("#ovslideshow"+bellcat).css("height", ch+"px");
});
제안 된 솔루션 :
내 솔루션은 onImagesLoad의 jQuery 플러그인을 사용하고있다. 콜백하면로드하는 gif가 숨겨지고 .ovwrapper 클래스가 사라집니다. ('가시', '가시')가 나는 가시성을 필요로했기 때문에 비트가) (숨기기.
$(function(){
//attach onImagesLoad to the entire body
$('.ovslideshow').onImagesLoad({
selectorCallback: selectorImagesLoaded
});
//the selectorCallback function, invoked once when all images contained within $('body') have loaded
function selectorImagesLoaded($selector){
//note: this == $selector. $selector will be $("body") in this example
$("#loading").hide();
$('.ovwrapper').css('visibility','visible').hide().fadeIn('slow');
}
});
완료 효과는 여기에 있습니다 : 나는 완성 된 오버레이에서 퇴색하기 전에 이미지 위치와 규모 덤비는하고 숨길 : http://www.andrewstonyer.co.uk/test/index.html
그래서 무엇이 문제입니까? –
나는 누군가가 그의 코드를 다시 쓰길 원한다고 생각한다. – Mervyn