AJAX가 브라우저 로드 표시기를 트리거하도록 하는 방법

AJAX가 브라우저 로드 표시기를 트리거하도록 하는 방법

에이잭스 지원 연구실 일정 프로그램을 만들고 있는데 일부 에이잭스 작업이 빠르지 않아요

Gmail에서는 받은 편지함으로 이동하거나 메시지를 보낼 때 브라우저는 로드되는 것처럼 동작합니다(FF에서는 중지 버튼이 활성화되고 진행 표시줄이 표시됨). 그러나 새 페이지에 표시되지 않고 AJAX를 통해 수행됩니다.

어떻게 하는 거지?조금 반짝이는 인디케이터를 가지고 있습니다만, 브라우저가 로드하는 것처럼 동작하는 것은 좋은 터치입니다.좋은 생각 있어요?

이것이 당신의 답변이라고 생각합니다.(Obviously.com의 리버스-AJAX 또는 "슬로우 로드" 기법)

GMail 및 Facebook 메서드처럼 보입니다(브라우저는 페이지를 로드 아이콘 등으로 표시하고 있습니다.백그라운드 에이잭스 요청이 있기 때문에 시뮬레이션을 하고 있을 뿐입니다).

여기에서 관련 답변을 찾았습니다. 브라우저는 Ajax 요청이 완료된 후 '로드'를 계속합니다.

iframe을 만들고 브라우저의 기본 애니메이션 로딩이 시작되고 중지되는 것처럼 보이는 내용 문서를 열고 닫을 수 있습니다.http://jsfiddle.net/KSXkS/1/ 의 예를 참조해 주세요.

많은 사용자가 브라우저의 기본 로드 표시기를 이해하지 못하거나 알아차리지 못합니다.실제로 장시간 실행 중인 경우 웹 애플리케이션의 일부로 표시하는 것이 가장 좋습니다.콘텍스트는 매우 중요합니다.이것은, 유저에게 현재 진행 상황이나 사용 가능한 기능을 전달할 수 있는 기회입니다.

요청 시 전체 사용자 인터페이스가 비활성화되면 로드 표시기가 있는 오버레이가 적합합니다.약간 불투명한 오버레이는 시야를 흐트러뜨리지 않고 사용자에게 통신합니다.

요청이 시작되어 작동 중임을 표시해야 하는 경우 요청을 시작한 버튼 옆에 있는 스피너가 가장 좋습니다.성공 시 스피너는 녹색 체크 표시 또는 짧은 시간 후 희미해지는 기타 일반적인 표시로 교체할 수 있습니다.

이것들은 구글의 많은 어플리케이션에서 볼 수 있는 일반적인 패턴이다.

이 문서에서는 다양한 유형의 요청과 이러한 요청으로 인해 진행 표시줄과 같은 사용 중인 표시기가 트리거되는지 여부에 대해 자세히 설명합니다.

이런 걸 원하시겠죠?

하기 위해 했습니다.github.com(관련은 없지만 샘플 API의 목적에 부합한다고 생각합니다).

JavaScript ★★★★★★★★★★★★★★★★★」JQuery 를 표시에 로딩 인디케이터를 AJAX탁한한다

$('#btn').click(function() {
  $('#overlay').show();
  $.ajax('https://freegeoip.net/json/github.com').then(function(response) {
    $('#overlay').hide();
    $('#country').html(response.country_name);
  });
});

body {
  padding: 0;
  margin: 0;
}

#overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  top: 0;
  background-color: rgba(255, 255, 255, 0.7);
}

.plus {
  display: flex;
  margin: 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="overlay" style="display:none">
  <div class="plus">
    <img src="https://loading.io/assets/img/landing/curved-bars.svg" alt="loading"/>
  </div>
</div>

<div>
  <button id="btn">Perform AJAX Operation</button>
  <div>
  Country: <span id="country"></span>
  </div>
</div>

할 수 있는 방법은 '사용할 수 있는 방법'을 사용하는 입니다.iframe로드를 트리거합니다.하지만 이전 답변에 따르면 iframe 방식은 크롬에서는 작동하지 않습니다.

에 다른 은 로딩 아이콘을 만드는 합니다.fake loading icon.

브라우저 아이콘을 수동으로 업데이트할 수 있습니다.브라우저 아이콘을 업데이트하는 방법에 대한 몇 가지 튜토리얼이 있습니다.

그리고 아이콘에 애니메이션을 넣어보세요.★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★를 지원하지 않습니다.gif아이콘을 몇 초마다 업데이트해야 합니다.

데모 코드입니다.

 var favicon_images = [];
 for (var i = 1; i <= 12; i++)
   favicon_images.push('./icon/' + i + '.png');

 var image_counter = 0;

 setInterval(function() {
     var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
     link.type = 'image/x-icon';
     link.rel = 'shortcut icon';
     link.href = favicon_images[image_counter];
     document.getElementsByTagName('head')[0].appendChild(link);

   if(image_counter == favicon_images.length -1)
         image_counter = 0;
     else
         image_counter++;
 }, 150);

퀵 데모를 만듭니다.데모

이 데모에서는 아이콘 애니메이션이 원활하게 실행되지 않는 것을 알 수 있습니다.왜냐하면 아이콘을 업데이트할 때마다 브라우저가 아이콘을 다시 요청하기 때문입니다.

따라서 원활하게 동작하기 전에 이미지를 base64 형식으로 변환합니다.

Base64 데모

은 로딩 아이콘과 것만 찾으면 .Chrome인 브라우저의 " " "를 .fake loading당신이 에이잭스에게 전화할 때요.

---

여기에서는 변경 아이콘 튜토리얼을 붙여넣습니다.

• https://gist.github.com/mathiasbynens/428626
• 파비콘 애니메이션 만드는 법?

언급URL : https://stackoverflow.com/questions/1918218/how-to-have-ajax-trigger-the-browsers-loading-indicator