Pokaż obraz podczas wczytywania $ .ajax

Question

Zastanawiam się, jak wyświetlić obraz, który wskazuje, że żądanie asynchroniczne jest uruchomione. Używam następującego kodu do wykonania żądania asynchronicznego:

$.ajax({ 
    url: uri, 
    cache: false, 
    success: function(html){ 
    $('.info').append(html); 
    } 
}); 

Jakieś pomysły?

Answer 1

Można, oczywiście, pokaż to przed złożeniem wniosku i schować go po jej zakończeniu:

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

zwykle preferują bardziej ogólne rozwiązanie wiążących go do globalnych wydarzeń ajaxStart i ajaxStop, że sposób, w jaki przedstawia się dla wszystkich ajax zdarzeń:

$('#loading-image').bind('ajaxStart', function(){ 
    $(this).show(); 
}).bind('ajaxStop', function(){ 
    $(this).hide(); 
}); 

Answer 2

coś takiego:

$('#image').show(); 
$.ajax({ 
    url: uri, 
    cache: false, 
    success: function(html){ 
     $('.info').append(html); 
     $('#image').hide(); 
    } 
}); 

Answer 3

Przed rozmowy albo włóż ładowania obrazu w div/span gdzieś, a następnie na funkcję sukcesu usunąć ten obraz. Alternatywnie można utworzyć klasę css jak załadunek, że może wyglądać tak

.loading 
{ 
    width: 16px; 
    height: 16px; 
    background:transparent url('loading.gif') no-repeat 0 0; 
    font-size: 0px; 
    display: inline-block; 
} 

a następnie przypisać tej klasy do rozpiętości/dz i wyczyścić go w funkcji sukcesu

Answer 4

Zawsze lubiłem BlockUI wtyczki: http://jquery.malsup.com/block/

To pozwala blokować pewne elementy strony lub całej strony natomiast ajax żądanie jest uruchomiony.

Answer 5

Skorzystaj z funkcji Wypełnij i uzupełnij obiekt ajax. Lepiej pokazać gif z wnętrza przed wysłaniem, aby wszystkie zachowania były zawarte w jednym obiekcie. Uważaj na ukrywanie gif za pomocą funkcji sukcesu. Jeśli żądanie nie powiedzie się, prawdopodobnie nadal będziesz chciał ukryć gif. Aby to zrobić, użyj funkcji Complete. Wyglądałoby to tak:

$.ajax({ 
    url: uri, 
    cache: false, 
    beforeSend: function(){ 
     $('#image').show(); 
    }, 
    complete: function(){ 
     $('#image').hide(); 
    }, 
    success: function(html){ 
     $('.info').append(html); 
    } 
}); 

Answer 6

"Obraz" ludzie zwykle pokazują podczas połączenia ajax jest animowany gif. Ponieważ nie ma możliwości określenia procentu wypełnienia żądania ajax, animowane gify są nieokreślonymi spinnerami. To tylko obraz powtarzający się w kółko jak kula kół o różnych rozmiarach. Dobre miejsce, aby stworzyć swój własny nieokreślony tarczy jest http://ajaxload.info/

Answer 7

HTML kod:

<div class="ajax-loader"> 
    <img src="{{ url('guest/images/ajax-loader.gif') }}" class="img-responsive" /> 
</div> 

kod CSS:

.ajax-loader { 
    visibility: hidden; 
    background-color: rgba(255,255,255,0.7); 
    position: absolute; 
    z-index: +100 !important; 
    width: 100%; 
    height:100%; 
} 

.ajax-loader img { 
    position: relative; 
    top:50%; 
    left:50%; 
} 

kod jQuery:

$.ajax({ 
    type:'POST', 
    beforeSend: function(){ 
    $('.ajax-loader').css("visibility", "visible"); 
    }, 
    url:'/quantityPlus', 
    data: { 
    'productId':p1, 
    'quantity':p2, 
    'productPrice':p3}, 
    success:function(data){ 
    $('#'+p1+'value').text(data.newProductQuantity); 
    $('#'+p1+'amount').text("₹ "+data.productAmount); 
    $('#totalUnits').text(data.newNoOfUnits); 
    $('#totalAmount').text("₹ "+data.newTotalAmount); 
    }, 
    complete: function(){ 
    $('.ajax-loader').css("visibility", "hidden"); 
    } 
}); 

}