어떻게 jQuery를에 로딩 스피너를 보여?

해결법

1.몇 가지 방법이 있습니다. 나의 선호하는 방법은 요소 자체에 ajaxStart / 정지 이벤트에 함수를 연결하는 것입니다.

몇 가지 방법이 있습니다. 나의 선호하는 방법은 요소 자체에 ajaxStart / 정지 이벤트에 함수를 연결하는 것입니다.
```
$('#loadingDiv')
    .hide()  // Hide it initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    })
;
```
당신이 어떤 아약스 호출을 할 때마다 ajaxStart / 정지 기능이 실행됩니다.

업데이트 :으로 jQuery를 1.8, .ajaxStart / 정지는 문서에 첨부해야하는 문서 상태. 이것은 위의 코드로 변환합니다 :
```
var $loading = $('#loadingDiv').hide();
$(document)
  .ajaxStart(function () {
    $loading.show();
  })
  .ajaxStop(function () {
    $loading.hide();
  });
```

2.jQuery를 내가 사용을 위해

jQuery를 내가 사용을 위해

jQuery.ajaxSetup({
  beforeSend: function() {
     $('#loader').show();
  },
  complete: function(){
     $('#loader').hide();
  },
  success: function() {}
});

3.당신은 단지 jQuery의 아약스 기능을 사용하고 옵션 beforeSend을 사용하고 로더 DIV 같은 것을 보여줄 수있는 성공 옵션에 해당 로더 사업부를 숨길 수있는 몇 가지 기능을 정의 할 수 있습니다.

당신은 단지 jQuery의 아약스 기능을 사용하고 옵션 beforeSend을 사용하고 로더 DIV 같은 것을 보여줄 수있는 성공 옵션에 해당 로더 사업부를 숨길 수있는 몇 가지 기능을 정의 할 수 있습니다.
```
jQuery.ajax({
    type: "POST",
    url: 'YOU_URL_TO_WHICH_DATA_SEND',
    data:'YOUR_DATA_TO_SEND',
    beforeSend: function() {
        $("#loaderDiv").show();
    },
    success: function(data) {
        $("#loaderDiv").hide();
    }
});
```
당신은 어떤 회전 GIF 이미지를 가질 수 있습니다. 다음은 색상에 따라 좋은 AJAX 로더 생성기있는 웹 사이트는 다음과 같습니다 http://ajaxload.info/
4.당신이 바로 AJAX 호출하기 전에 DOM에 애니메이션 이미지를 삽입하고 제거하는 인라인 함수를 할 수있는 ...

당신이 바로 AJAX 호출하기 전에 DOM에 애니메이션 이미지를 삽입하고 제거하는 인라인 함수를 할 수있는 ...
```
$("#myDiv").html('<img src="images/spinner.gif" alt="Wait" />');
$('#message').load('index.php?pg=ajaxFlashcard', null, function() {
  $("#myDiv").html('');
});
```
이것은 후속 요청 (있는 경우 그 사항)에 동일한 프레임에서 확인 애니메이션 시작을 할 것입니다. 애니메이션 어려움이있을 수 있습니다 IE의 이전 버전을합니다.

행운을 빕니다!

5.

$('#message').load('index.php?pg=ajaxFlashcard', null, showResponse);
showLoad();

function showResponse() {
    hideLoad();
    ...
}

http://docs.jquery.com/Ajax/load#urldatacallback

6.당신이 $의 아약스 ()를 사용하는 경우는 다음과 같이 사용할 수 있습니다 :

당신이 $의 아약스 ()를 사용하는 경우는 다음과 같이 사용할 수 있습니다 :
```
$.ajax({
  url: "destination url",
  success: sdialog,
  error: edialog,
  // shows the loader element before sending.
  beforeSend: function() {
    $("#imgSpinner1").show();
  },
  // hides the loader after completion of request, whether successfull or failor.             
  complete: function() {
    $("#imgSpinner1").hide();
  },
  type: 'POST',
  dataType: 'json'
});
```
설정이 jQuery를 1.5로 "beforeSend을", 이름이 있지만 "beforeSend"는 관계없이 요청 유형의 호출됩니다. 즉 .show () 함수가 호출 될 경우 타입 'GET'.
7.http://plugins.jquery.com/project/loading :로드 플러그인을 사용하여

http://plugins.jquery.com/project/loading :로드 플러그인을 사용하여
```
$.loading.onAjax({img:'loading.gif'});
```
8.변형 : 나는 메인 페이지의 왼쪽 상단에 ID = "로고"로 아이콘이; 아약스가 작동 할 때 회 전자 GIF는 (투명도) 위에 중첩된다.

변형 : 나는 메인 페이지의 왼쪽 상단에 ID = "로고"로 아이콘이; 아약스가 작동 할 때 회 전자 GIF는 (투명도) 위에 중첩된다.
```
jQuery.ajaxSetup({
  beforeSend: function() {
     $('#logo').css('background', 'url(images/ajax-loader.gif) no-repeat')
  },
  complete: function(){
     $('#logo').css('background', 'none')
  },
  success: function() {}
});
```

9.나는 원래 응답에 두 가지 변화와 함께 끝났다.

나는 원래 응답에 두 가지 변화와 함께 끝났다.

이 이러한 변경 후 코드입니다 :

$(document)
    .hide()  // hide it initially
    .ajaxSend(function(event, jqxhr, settings) {
        if (settings.url !== "ajax/request.php") return;
        $(".spinner").show();
    })
    .ajaxComplete(function(event, jqxhr, settings) {
        if (settings.url !== "ajax/request.php") return;
        $(".spinner").hide();
    })

10.나는 또한이 답변에 기여하고자합니다. 내가 jQuery를 비슷한 뭔가를 찾고 있었다 그리고 이것은 내가 궁극적으로 사용하여 결국 무엇을.

나는 또한이 답변에 기여하고자합니다. 내가 jQuery를 비슷한 뭔가를 찾고 있었다 그리고 이것은 내가 궁극적으로 사용하여 결국 무엇을.

나는 http://ajaxload.info/에서 내 로딩 스피너를 얻었다. 내 솔루션은 http://christierney.com/2011/03/23/global-ajax-loading-spinners/에서이 간단한 대답을 기반으로합니다.

기본적으로 당신의 HTML 마크 업 및 CSS는 다음과 같이 보일 것이다 :

<style>
     #ajaxSpinnerImage {
          display: none;
     }
</style>

<div id="ajaxSpinnerContainer">
     <img src="~/Content/ajax-loader.gif" id="ajaxSpinnerImage" title="working..." />
</div>

그리고 jQuery를위한 코드는 다음과 같을 것이다 :

<script>
     $(document).ready(function () {
          $(document)
          .ajaxStart(function () {
               $("#ajaxSpinnerImage").show();
          })
          .ajaxStop(function () {
               $("#ajaxSpinnerImage").hide();
          });

          var owmAPI = "http://api.openweathermap.org/data/2.5/weather?q=London,uk&APPID=YourAppID";
          $.getJSON(owmAPI)
          .done(function (data) {
               alert(data.coord.lon);
          })
          .fail(function () {
               alert('error');
          });
     });
</script>

그것은과 간단하다 :

11.당신은 단순히 나중에 Ajax 호출을 사용하여 콘텐츠를로드하는 동일한 태그에 로더 이미지를 지정할 수 있습니다 :

당신은 단순히 나중에 Ajax 호출을 사용하여 콘텐츠를로드하는 동일한 태그에 로더 이미지를 지정할 수 있습니다 :
```
$("#message").html('<span>Loading...</span>');

$('#message').load('index.php?pg=ajaxFlashcard');
```
또한 이미지 태그로 span 태그를 대체 할 수 있습니다.
12.뿐만 아니라 아약스 이벤트에 대한 글로벌 기본값을 설정, 당신은 특정 요소에 대한 동작을 설정할 수 있습니다. 아마도 그들의 클래스는 충분하다 변화?

뿐만 아니라 아약스 이벤트에 대한 글로벌 기본값을 설정, 당신은 특정 요소에 대한 동작을 설정할 수 있습니다. 아마도 그들의 클래스는 충분하다 변화?
```
$('#myForm').ajaxSend( function() {
    $(this).addClass('loading');
});
$('#myForm').ajaxComplete( function(){
    $(this).removeClass('loading');
});
```
예 CSS, 스피너와 숨기기 #myForm에 :
```
.loading {
    display: block;
    background: url(spinner.gif) no-repeat center middle;
    width: 124px;
    height: 124px;
    margin: 0 auto;
}
/* Hide all the children of the 'loading' element */
.loading * {
    display: none;  
}
```
13.당신이 직장에 스피너에 대한 비동기 호출을 사용해야합니다 (광산 AJAX 호출이 끝날 때까지 보여주지 원인 및 호출이 완료하고, 스피너를 제거했던대로 다음 신속하게 도망 갔어요 무엇인가 그 이상).

당신이 직장에 스피너에 대한 비동기 호출을 사용해야합니다 (광산 AJAX 호출이 끝날 때까지 보여주지 원인 및 호출이 완료하고, 스피너를 제거했던대로 다음 신속하게 도망 갔어요 무엇인가 그 이상).
```
$.ajax({
        url: requestUrl,
        data: data,
        dataType: 'JSON',
        processData: false,
        type: requestMethod,
        async: true,                         <<<<<<------ set async to true
        accepts: 'application/json',
        contentType: 'application/json',
        success: function (restResponse) {
            // something here
        },
        error: function (restResponse) {
            // something here                
        }
    });
```

14.

$('#loading-image').html('<img src="/images/ajax-loader.gif"> Sending...');

        $.ajax({
            url:  uri,
            cache: false,
            success: function(){
                $('#loading-image').html('');           
            },

           error:   function(jqXHR, textStatus, errorThrown) {
            var text =  "Error has occured when submitting the job: "+jqXHR.status+ " Contact IT dept";
           $('#loading-image').html('<span style="color:red">'+text +'  </span>');

            }
        });

15.내가 jQuery를 UI 대화 상자에 다음을 사용했습니다. (아마 다른 아약스 콜백와 함께 작동?)

내가 jQuery를 UI 대화 상자에 다음을 사용했습니다. (아마 다른 아약스 콜백와 함께 작동?)
```
$('<div><img src="/i/loading.gif" id="loading" /></div>').load('/ajax.html').dialog({
    height: 300,
    width: 600,
    title: 'Wait for it...'
});
```
그 내용이 때 아약스 통화 완료를 교체 할 때까지이 애니메이션 로딩 GIF가 포함되어 있습니다.

16.이것은 나를위한 최선의 방법입니다 :

이것은 나를위한 최선의 방법입니다 :

jQuery를 :

$(document).ajaxStart(function() {
  $(".loading").show();
});

$(document).ajaxStop(function() {
  $(".loading").hide();
});

커피:

  $(document).ajaxStart ->
    $(".loading").show()

  $(document).ajaxStop ->
    $(".loading").hide()

문서 도구 : ajaxStart, ajaxStop

17.

$.listen('click', '#captcha', function() {
    $('#captcha-block').html('<div id="loading" style="width: 70px; height: 40px; display: inline-block;" />');
    $.get("/captcha/new", null, function(data) {
        $('#captcha-block').html(data);
    }); 
    return false;
});

#loading { background: url(/image/loading.gif) no-repeat center; }

18.이것은 특정 목적을위한 매우 간단하고 스마트 플러그인입니다 : https://github.com/hekigan/is-loading

이것은 특정 목적을위한 매우 간단하고 스마트 플러그인입니다 : https://github.com/hekigan/is-loading

19.나는 이것을한다:

나는 이것을한다:

var preloaderdiv = '<div class="thumbs_preloader">Loading...</div>';
           $('#detail_thumbnails').html(preloaderdiv);
             $.ajax({
                        async:true,
                        url:'./Ajaxification/getRandomUser?top='+ $(sender).css('top') +'&lef='+ $(sender).css('left'),
                        success:function(data){
                            $('#detail_thumbnails').html(data);
                        }
             });

20.그 쪽이 맞는 거 같아요. 이 방법은 너무 세계입니다 ...

그 쪽이 맞는 거 같아요. 이 방법은 너무 세계입니다 ...

그러나 - 그것은 당신의 AJAX 호출이 페이지 자체에는 영향을주지 않을 때 좋은 기본입니다. (배경 예를 들어 저장). (당신은 항상 "글로벌"전달하여 특정 아약스 호출을 해제 할 수 있습니다 : 거짓 - JQuery와에 설명서를 참조하십시오

AJAX 호출이 페이지의 일부를 갱신하기위한 것입니다 때, 내 "로드"이미지 같은 나는 상쾌 섹션에 고유합니다. 나는 갱신되는 부분을보고 싶습니다.

당신은 단순히 뭔가를 쓸 수 있다면 것 냉각하는 방법을 상상해 :

$("#component_to_refresh").ajax( { ... } );

그리고이이 섹션에 "로딩"이 표시됩니다. 다음은 나뿐만 아니라 그 핸들 "로드"디스플레이를 쓴 기능입니다 그러나 당신이 아약스에서 새로 고침하는 지역에 따라 다릅니다.

첫째, 사용하는 방법을 내가 당신을 보여 드리죠

<!-- assume you have this HTML and you would like to refresh 
      it / load the content with ajax -->

<span id="email" name="name" class="ajax-loading">
</span>

<!-- then you have the following javascript --> 

$(document).ready(function(){
     $("#email").ajax({'url':"/my/url", load:true, global:false});
 })

당신이 원하는대로 당신이 향상 할 수있는 기본 시작 - 그리고 이것은 기능입니다. 그것은 매우 유연합니다.

jQuery.fn.ajax = function(options)
{
    var $this = $(this);
    debugger;
    function invokeFunc(func, arguments)
    {
        if ( typeof(func) == "function")
        {
            func( arguments ) ;
        }
    }

    function _think( obj, think )
    {
        if ( think )
        {
            obj.html('<div class="loading" style="background: url(/public/images/loading_1.gif) no-repeat; display:inline-block; width:70px; height:30px; padding-left:25px;"> Loading ... </div>');
        }
        else
        {
            obj.find(".loading").hide();
        }
    }

    function makeMeThink( think )
    {
        if ( $this.is(".ajax-loading") )
        {
            _think($this,think);
        }
        else
        {
            _think($this, think);
        }
    }

    options = $.extend({}, options); // make options not null - ridiculous, but still.
    // read more about ajax events
    var newoptions = $.extend({
        beforeSend: function()
        {
            invokeFunc(options.beforeSend, null);
            makeMeThink(true);
        },

        complete: function()
        {
            invokeFunc(options.complete);
            makeMeThink(false);
        },
        success:function(result)
        {
            invokeFunc(options.success);
            if ( options.load )
            {
                $this.html(result);
            }
        }

    }, options);

    $.ajax(newoptions);
};

21.당신이 당신의 자신의 코드를 작성하지 않으려면, 그저 그렇게 플러그인을 많이도 있습니다 :

당신이 당신의 자신의 코드를 작성하지 않으려면, 그저 그렇게 플러그인을 많이도 있습니다 :
22.당신이 서버 요청을 로더 매번를 사용하려는 경우, 다음과 같은 패턴을 사용할 수 있습니다.

당신이 서버 요청을 로더 매번를 사용하려는 경우, 다음과 같은 패턴을 사용할 수 있습니다.
```
 jTarget.ajaxloader(); // (re)start the loader
 $.post('/libs/jajaxloader/demo/service/service.php', function (content) {
     jTarget.append(content); // or do something with the content
 })
 .always(function () {
     jTarget.ajaxloader("stop");
 });
```
(I 방금 만든)을 jajaxloader 플러그인 특정 용도에이 코드

https://github.com/lingtalfi/JAjaxLoader/

23.거짓 라인과 회 쇼까지이 같은 내 아약스 코드 외모, 효과, 난 그냥 비동기을 주석했다.

거짓 라인과 회 쇼까지이 같은 내 아약스 코드 외모, 효과, 난 그냥 비동기을 주석했다.

$.ajax({
        url: "@Url.Action("MyJsonAction", "Home")",
        type: "POST",
        dataType: "json",
        data: {parameter:variable},
        //async: false, 

        error: function () {
        },

        success: function (data) {
          if (Object.keys(data).length > 0) {
          //use data 
          }
          $('#ajaxspinner').hide();
        }
      });

나는 아약스 코드 앞에 함수 내에서 스피너를 표시하고 있습니다 :

$("#MyDropDownID").change(function () {
        $('#ajaxspinner').show();

HTML을 위해, 나는 글꼴 최고 클래스를 사용하고 있습니다 :

누군가가 도움이되기를 바랍니다.

24.아약스로드가있는 동안 당신은 항상 당신을 위해 모든 작업을 수행 블록 UI jQuery 플러그인을 사용하고, 모든 입력의 그것은 심지어 블록 페이지 수 있습니다. 경우 플러그인이 작동되지 않은 것, 당신이 대답에서 사용하는 올바른 방법에 대해 읽을 수 있습니다. 확인 해봐.

아약스로드가있는 동안 당신은 항상 당신을 위해 모든 작업을 수행 블록 UI jQuery 플러그인을 사용하고, 모든 입력의 그것은 심지어 블록 페이지 수 있습니다. 경우 플러그인이 작동되지 않은 것, 당신이 대답에서 사용하는 올바른 방법에 대해 읽을 수 있습니다. 확인 해봐.

from https://stackoverflow.com/questions/68485/how-to-show-loading-spinner-in-jquery by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 어떻게 16 진수 색상 값이 아닌 RGB 값을 얻을 수 있습니까?  (0) 2020.09.24

[JQUERY] jQuery를 게시 JSON  (0) 2020.09.24

[JQUERY] (CORS) 게시 요청 가공 크로스 원산지 자원 공유를 얻는 방법  (0) 2020.09.24

[JQUERY] 용지 <input 타입 = '파일'/> jQuery를 사용  (0) 2020.09.24

[JQUERY] jQuery를 선택 정규 표현식  (0) 2020.09.24

복붙노트

[JQUERY] 어떻게 jQuery를에 로딩 스피너를 보여?

어떻게 jQuery를에 로딩 스피너를 보여?

해결법

1.몇 가지 방법이 있습니다. 나의 선호하는 방법은 요소 자체에 ajaxStart / 정지 이벤트에 함수를 연결하는 것입니다.

2.jQuery를 내가 사용을 위해

3.당신은 단지 jQuery의 아약스 기능을 사용하고 옵션 beforeSend을 사용하고 로더 DIV 같은 것을 보여줄 수있는 성공 옵션에 해당 로더 사업부를 숨길 수있는 몇 가지 기능을 정의 할 수 있습니다.

4.당신이 바로 AJAX 호출하기 전에 DOM에 애니메이션 이미지를 삽입하고 제거하는 인라인 함수를 할 수있는 ...

5.

6.당신이 $의 아약스 ()를 사용하는 경우는 다음과 같이 사용할 수 있습니다 :

7.http://plugins.jquery.com/project/loading :로드 플러그인을 사용하여

8.변형 : 나는 메인 페이지의 왼쪽 상단에 ID = "로고"로 아이콘이; 아약스가 작동 할 때 회 전자 GIF는 (투명도) 위에 중첩된다.

9.나는 원래 응답에 두 가지 변화와 함께 끝났다.

10.나는 또한이 답변에 기여하고자합니다. 내가 jQuery를 비슷한 뭔가를 찾고 있었다 그리고 이것은 내가 궁극적으로 사용하여 결국 무엇을.

11.당신은 단순히 나중에 Ajax 호출을 사용하여 콘텐츠를로드하는 동일한 태그에 로더 이미지를 지정할 수 있습니다 :

12.뿐만 아니라 아약스 이벤트에 대한 글로벌 기본값을 설정, 당신은 특정 요소에 대한 동작을 설정할 수 있습니다. 아마도 그들의 클래스는 충분하다 변화?

13.당신이 직장에 스피너에 대한 비동기 호출을 사용해야합니다 (광산 AJAX 호출이 끝날 때까지 보여주지 원인 및 호출이 완료하고, 스피너를 제거했던대로 다음 신속하게 도망 갔어요 무엇인가 그 이상).

14.

15.내가 jQuery를 UI 대화 상자에 다음을 사용했습니다. (아마 다른 아약스 콜백와 함께 작동?)

16.이것은 나를위한 최선의 방법입니다 :

17.

18.이것은 특정 목적을위한 매우 간단하고 스마트 플러그인입니다 : https://github.com/hekigan/is-loading

19.나는 이것을한다:

20.그 쪽이 맞는 거 같아요. 이 방법은 너무 세계입니다 ...

21.당신이 당신의 자신의 코드를 작성하지 않으려면, 그저 그렇게 플러그인을 많이도 있습니다 :

22.당신이 서버 요청을 로더 매번를 사용하려는 경우, 다음과 같은 패턴을 사용할 수 있습니다.

23.거짓 라인과 회 쇼까지이 같은 내 아약스 코드 외모, 효과, 난 그냥 비동기을 주석했다.

'JQUERY' 카테고리의 다른 글

티스토리툴바

[JQUERY] 어떻게 16 진수 색상 값이 아닌 RGB 값을 얻을 수 있습니까? (0)	2020.09.24
[JQUERY] jQuery를 게시 JSON (0)	2020.09.24
[JQUERY] (CORS) 게시 요청 가공 크로스 원산지 자원 공유를 얻는 방법 (0)	2020.09.24
[JQUERY] 용지 <input 타입 = '파일'/> jQuery를 사용 (0)	2020.09.24
[JQUERY] jQuery를 선택 정규 표현식 (0)	2020.09.24