Sayfa yüklenirken ajax yükleme gif animasyon göstermek nasıl?

4 Cevap php

Benim web sitesinde AJAX uygulamaya çalışın. Div changepass içeriği daha sonra tıklandığında zaman changepass.template.php yüklemek gerekir. İşte bunun için kullanarak kod im.

 $(function() {
   $(".changepass").click(function() {
    $(".block1").load("views/changepass.template.php");
    return false;
 });

Benim soru sayfa changepass.template.php tam yüklü iken GIF Animasyon (loading.gif) göstermek için nasıl. Bana bazı kod ipuçları Lütfen verin.

4 Cevap

There are many approaches to do this. A simple way to do,

 <div style="display:none" id="dvloader"><img src="loading.gif" /></div>

$(function() {
    $(".changepass").click(function() {
    	$("#dvloader").show();
    	$(".block1").load("views/changepass.template.php", function(){ $("#dvloader").hide(); });
    	return false;
    });
});

James Wiseman gelen öneri sonra göstermek için blok () :): Düzenlendi ekran

Biraz daha güçlü hale getirmek için, örneğin, eklemeyi unutmayın

<div style="display:none" id="dvloader"><img src="loading.gif" /></div>

html, ayrıca jQuery, gibi bir şey yapabilirsiniz:

var container = $.create('div', {'id':'dvloader'});
var image = $.create('img', {'src':'loading.gif'});
container.append($(image));
$("body").append($(container));

Div otomatik olarak eklemek hangi.

Sadece Onclick düğme olayı bu ateş.

Hataları biraz daha açık hale getirir.

Aksine bu stili ayarlama

.css("display", "block");

Sadece .hide() kullanımı ve. show() yöntemleri.

Bu HTML elemanları için tarayıcınızın varsayılan stil tanımları için hesap. Sen görüntü için 'block' göstermek istemeyebilirsiniz. Bir eleman için farklı olası görüntü stilleri yükler olabilir:

http://www.w3schools.com/htmldom/prop%5Fstyle%5Fdisplay.asp

Eğer yük aradığını ve yük fonksiyonu geri arama kullanarak gizlemek sonra yükleme gif göstermek için bazı yöntemini çağırabilir:

$(function() {
   $(".changepass").click(function() {
    $("#gifImage").show(); 
    $(".block1").load("views/changepass.template.php",null,function(){
            $("#gifImage").hide();
    });
   return false;
});

etiketler