집 > 기사 > 웹 프론트엔드 > Ajax는 로딩 효과를 구현합니다.

Ajax는 로딩 효과를 구현합니다.

php中世界最好的语言원래의: 2018-04-25 16:00:223772검색

이번에는 Ajax를 통해 Loading 효과를 구현하는 방법을 알려드리겠습니다. Ajax에서 Loading 효과를 구현하는 데 있어 주의 사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

Ajax 배경 데이터 요청 과정에서 우리는 때때로 페이지 배경이 여전히 뭔가를 하고 있다는 것을 사용자가 알 수 있기를 바랍니다. 이때 우리는 사용자에게 매우 명확한 프롬프트를 제공해야 합니다. 이를 우리는 진행이라고 부릅니다. bar

구현 원칙:

Jquery는 C#과 유사한 측면 지향 효과를 달성하기 위해 Ajax를 전역적으로 설정할 수 있습니다. 즉, 제출 전과 제출이 완료된 후에 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를 사용하면 원하는 것은 무엇이든 재생할 수 있습니다.

■ 이 제어 로직을 직접 작성하기에 적합한 또 다른 솔루션이 있습니다. 로딩 상자만 표시하고

시작하거나 종료할 때마다 ajax-cout의 값을 유지하고 data-ajax-count가 0보다 작거나 같으면 p를 숨겨야 합니다. 가능하지만 저는 이 방법을 실행해 본 적이 없습니다.

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

이 기사의 사례를 읽으신 후 이 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!