집 >웹 프론트엔드 >JS 튜토리얼 >Ajax 글로벌 로딩 박스 구성(로딩 효과)

Ajax 글로벌 로딩 박스 구성(로딩 효과)

亚连원래의: 2018-05-23 15:51:552872검색

이 글은 Ajax 글로벌 로딩 박스 구성(로딩 효과)에 대한 관련 정보를 주로 소개합니다. 매우 훌륭하고 참고할만한 가치가 있습니다. 필요한 친구들이 참고할 수 있습니다.

Ajax가 백그라운드 데이터를 요청하는 과정에서, 때때로 우리는 페이지 배경이 여전히 뭔가를 하고 있다는 것을 사용자가 알 수 있기를 바랍니다. 이때 우리는 진행률 표시줄이라고 부르는 매우 명확한 프롬프트를 제공해야 합니다. 구현 원칙:

Jquery는 전역 Ajax 설정을 수행하여 C#과 유사한 측면 지향 효과를 얻을 수 있습니다. 즉, 제출 전과 제출이 완료된 후에 Ajax에서 일련의 작업을 수행할 수 있으므로 Ajax가 실행될 때 로딩 상자를 표시할 수 있습니다. Ajax 요청이 완료된 후 로딩 상자를 닫으면 기본적으로 이 효과가 완벽하게 달성됩니다.

Jquery에서 Ajax를 전역적으로 구성하는 방법은 다음과 같습니다.

$.ajaxSetup({
beforeSend: function () {
//ajax请求之前
},
complete: function () {
//ajax请求完成，不管成功失败
},
error: function () {
//ajax请求失败
}
});

물론 beforeSend/complete/error 구성을 ajaxSetup에 작성하여 공개 페이지에 넣을 수도 있습니다. . 글로벌이네요~마지막으로 코드를 제시해 주세요. 여기서는 편의상 로딩 효과를 내기 위해 레이어 플러그인을 직접 사용했고, CSS는 작성하지 않았습니다. 결국 이건 우리의 강점이 아니네요~ 학생들이 직접 로딩 효과를 작성하고 js를 사용하여 직접 복사하고 싶다면 레이어와 포털을 소개해주세요: http:/ /layer.layui.com/

여기 설명해야 할 한 가지는 동시에 여러 개의 Ajax가 있을 때 하나는 로드되고 다른 하나는 꺼질 수 있다는 것입니다. 이를 위해 다음을 생각할 수 있습니다. 두 가지 해결 방법:

■현재 해결 방법은 여러 개의 항목을 열게 한 다음(좌표는 모두 동일하고 볼 수 없음) 끝 중 하나를 닫는 것입니다. 여기서 내가 하는 일은 ajaxSetup에 인덱스 매개 변수를 추가하는 것입니다. 이것은 set 객체에만 기록될 수 있습니다. 그렇지 않으면 모든 ajax가 여전히 동일한 객체를 공유합니다. index를 사용하면 원하는 것은 무엇이든 재생할 수 있습니다.

■ 이 제어 로직을 직접 작성하기에 적합한 또 다른 솔루션이 있습니다. 하나의 로딩 상자만 표시되며 68b04ebe9fe091c54b19825cd001dbfb94b3e26ee717c64999d7867364b1b4a3 시작하거나 종료할 때마다 ajax-cout의 값을 유지하고, data-ajax-count가 0보다 작거나 같으면 언제 ajax가 종료되는지 판단합니다. p, 그럴 수 있겠지만 저는 이 방법을 실천해 본 적이 없습니다.

$(function () {
$.ajaxSetup({
layerIndex:-1,
beforeSend: function () {
this.layerIndex = layer.load(0, { shade: [0.5, &#39;#393D49&#39;] });
},
complete: function () {
layer.close(this.layerIndex);
},
error: function () {
layer.alert(&#39;部分数据加载失败，可能会导致页面显示异常，请刷新后重试&#39;, {
skin: &#39;layui-layer-molv&#39;
, closeBtn: 0
, shift: 4 //动画类型
});
}
});
});

위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 분들께 도움이 되길 바랍니다.

Ajax 글로벌 로딩 박스 구성(로딩 효과)

관련 기사