프로젝트의 많은 장소가 Ajax에 제출되어 애니메이션을 기다리는 효과를 추가하기 때문에 간단한 일반적인 목적 JS 방법을 썼습니다.
코드는 다음과 같습니다.
다음과 같이 코드 코드를 복사하십시오.
/*Ajax 제출 지연 대기 효과*/
var ajaxloding = new Object ();
// Wreaperid : 숙소 그림을 표시하는 컨테이너 요소
// MS : 숙박 아이콘의 길이가 표시됩니다.
// Envent : 이벤트 이벤트의 출처는 출발 이벤트의 객체를 얻는 데 사용됩니다.
// 콜백 : 애니메이션이 끝난 후 실행 된 복구 메소드를 나타냅니다.
// stop () 메소드는 복구 메소드가 성공적으로 실행 된 후 숨겨진 애니메이션의 작동을 나타냅니다.
ajaxloding.load = function (lodingid, ms, event, 왼쪽, 상단, 콜백) {
if (! left || typeof left == undefined)
왼쪽 = 0;
if (! top || typeof top == undefined)
상단 = 0;
this.lodingid = lodingid;
this.obj = $ ( "#" + this.lodingid);
this.sourceevengenelement = $ (event.currentTarget);
this.start = function () {
this.obj.css ({positin : "repor"});
this.sourceeveEntelement.attr ( "비활성화", true);
// 기본적으로 아이콘 아이콘과 lodingID를 표시하고 다음 스타일을 설정합니다.
var imgobj = $ ( "<img src = '/images/loaderc.gif'style = '위치 : 절대; 너비 : 32px; 높이 : 32px;'id = 'img_loding'" ");
imgobj.css ({왼쪽 : this.obj.width () / 2- imgobj.width () / 3-heft, top : this.obj.height () / 2-imgobj.heigh () / 2-top}) ;;
imgobj.appendto (this.obj);
this.obj.animate ({height : this.obj.height ()}, ms, function () {
콜백 ();
});
};
this.stop = function () {
$ ( "#img_loding");
this.sourceeveEntelement.attr ( "비활성화", false);
}
};
통화 방법 :
다음과 같이 코드 코드를 복사하십시오.
$ ( "#ElementID").
var obj = new AjaxLoding.load ( "div_test", 2000, e, 0,0, function () {
// ALERT ( "성공적인 제출!");
obj.stop (); //로드 아이콘을 숨 깁니다
});
obj.start ();
});
내가 사용하는 숙소 아이콘은 직접 대체 할 수 있습니다.
구현은 매우 간단하며, 고려 사항, 표준 또는 무언가가 없으며, 더 나은 환영 교환이 있습니다.