javascript 범용 로딩 애니메이션 효과 예제 code_javascript 기술

프로젝트 내 여러 곳에서 ajax 제출 시 대기 애니메이션 효과를 추가해야 하기 때문에 간단한 일반 js 메소드를 작성했습니다.
코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

/*Ajax 제출 지연 효과*/

var AjaxLoding = new Object();

//wraperid: 로딩 이미지를 표시하는 컨테이너 요소
//ms: 로딩 아이콘 표시 기간(밀리초)을 나타냅니다.
//envent: 런칭 이벤트의 이벤트 소스 객체를 나타내며, 런칭 이벤트의 객체 획득
//콜백: 애니메이션 종료 후 실행되는 콜백 메소드를 나타냅니다.
//stop() 메소드는 콜백 메소드가 성공적으로 실행된 후 실행되는 애니메이션을 숨기는 동작을 나타냅니다.
AjaxLoding.load = function(lodingid, ms,event,left,top,callback){

if (!left || typeof left == 정의되지 않음)
left = 0;
if (! 상단 || 유형 상단 == 정의되지 않음 )
상단 = 0;

this.lodingid = lodingid; //로딩 아이콘의 상위 요소 표시
this.obj = $("#" this.lodingid);
this.sourceEventElement=$(event.currentTarget);
this.start = function () {
　this.obj.css({positin:"relative"});
this.sourceEventElement.attr("disabled",true);
// 기본값은 아이콘이 중앙에 위치하며 lodingid로 표시됩니다.
var imgobj = $("");
imgobj.css({ 왼쪽: this.obj.width() / 2-imgobj.width()/2-left, 위쪽: this.obj. 높이() / 2- imgobj.height()/2-top });
imgobj.appendTo(this.obj);
this.obj.animate({height:this.obj.height()} , ms, function () {
        콜백();
       }) sourceEventElement.attr("disabled", false);
}
};



호출 방법:

코드 복사

코드는 다음과 같습니다.$(" #elementid" ).click(function (e) { var obj = new AjaxLoding.load("div_test", 2000,e,0,0,function () {

                                      ~ ~              

내가 사용한 숙박 아이콘은 당신으로 대체될 수 있습니다

성능, 표준 등을 고려하지 않고 구현이 매우 간단하며 아직 불완전한 점이 많으며 더 나은 의사소통을 환영합니다.