Ajax 동기 호출 은 애니메이션 디 스 플레이 불 러 오기 에 영향 을 줍 니 다.

며칠 전 프로젝트 작업 중 "ajax 가 그림 을 처리 할 때 마스크 를 제출 하고 불 러 오 는 중 표시 되 지 않 습 니 다" 라 는 질문 을 받 았 습 니 다. 기록 해 보 세 요.
문제 설명: 글 을 입력 할 때 외부 이미지 권한 문제 로 app 에서 보 여줄 때 접근 할 수 없 기 때문에 글 을 제출 할 때 그림 처 리 를 해 야 합 니 다. 여기 서 ajax 를 사용 하여 서버 에 동기 화하 여 url 로 원래 img 의 src 를 교체 합 니 다.문 제 는 점 에서 제출 할 때 페이지 가 차단 되 어 있 고 로드 맵 이 표시 되 지 않 습 니 다.
해결 방안:
브 라 우 저의 렌 더 링 (UI) 스 레 드 와 js 스 레 드 는 서로 배척 되 며, js 를 실행 하 는 데 시간 이 걸 릴 때 페이지 렌 더 링 이 막 힙 니 다.비동기 ajax 를 실행 할 때 는 문제 가 없 지만 동기 화 요청 으로 설정 되면 다른 동작 (ajax 함수 뒤의 코드, 렌 더 링 스 레 드) 이 멈 춥 니 다.내 DOM 작업 문 구 는 요청 하기 전 문장 이 더 라 도 이 동기 화 요청 은 UI 스 레 드 를 빠르게 막 아 실행 할 시간 을 주지 않 습 니 다.이것 이 바로 코드 가 효력 을 잃 은 원인 이다.
이전 코드 수정

                        $.ajax({
                            url: ctx + '/document/remote2Cos.php',
                            async: false,
                            type: 'post',
                            dataType: 'json',
                            data: {"fileUrl":src},
                            success: function (data) {
                                obj.attr("src",data.url);
                            }
                        })

수정 후 코드

                        var deferred = $.Deferred();
                        $.ajax({
                            url: ctx + '/document/remote2Cos.php',
                            type: 'post',
                            dataType: 'json',
                            data: {"fileUrl":src},
                            success:function (data) {
                                obj.attr("src",data.url);
                                deferred.resolve(data);
                            }
                        });
                        return deferred.promise;