미리로드 GIF를 스크립트에 추가하고 페이지

Question

제발,이 코드에 문제가 있습니다. 요컨대, 4 개의 링크가있는 메뉴가있는 작은 웹 페이지가 있습니다. 모든 링크는 jquery로드 기능을 사용하여 "target"이라는 div에 페이지 컨텐츠를로드합니다. 페이드 인을 추가하고 페이드 아웃 효과를 페이지에 적용했습니다. 로드 할 내용이 많은 거대한 페이지가있을 때 문제가 발생하므로 "대상"div와 js 스크립트 안의 코드에 오버레이와 작은 프리 로더 GIF를 넣어야합니다. 방법. 제발, 누군가 나를 도울 수 있니? 감사합니다 .. 여기

JS 기능 :

google.load('jquery', '1.4.2'); 
google.setOnLoadCallback(function(){ 

$('.nav a').click(function() { 
    $('.nav a').removeClass('selected'); 
    $(this).addClass('selected'); 
}); 

$('#link1').click(function() { 
    $('#target').fadeOut('fast', function() { 
     $('#target').load('content/1.html', function() { 
      $('#target').fadeIn('slow'); 
     }); 
    }); 
}); 

$('#link2').click(function() { 
    $('#target').fadeOut('fast', function() { 
     $('#target').load('content/2.html', function() { 
      $('#target').fadeIn('slow'); 
     }); 
    }); 
}); 

Answer 1

때마다 Ajax request is about to be sent, 다른 뛰어난 Ajax 요청이 있는지 jQuery를 확인합니다. 아무 것도 진행 중이 아니면 jQuery triggers the ajaxStart event. .ajaxStart() 메소드 등록 된

일체의 핸들러는이 시점에서 실행된다. 아약스 로더

.preload{ 
    background:url('your gif loader image path') center no-repeat; 
} 

의

CSS 클래스는 다음이 JQuery와는 프리로드 할 것입니다.

$('body').ajaxStart(function() { 
    $('.overlay').css({"background":"black","opacity":"0.7"}).show().addClass('preload'); 
}); 

나는 어떤 아약스 요청이 발생하면 여기에 내가 background gif image of ajaxloader있을 것이다 preload라는 클래스를 추가하고, 페이지 또는 특정 영역을 커버하는 투명 오버레이 DIV있을 것이라는 점을 가정한다.