Làm cách nào để hiển thị hoạt ảnh gif tải ajax khi trang đang tải?

Question

Tôi cố gắng triển khai AJAX trong trang web của mình. Khi nội dung của div changepass được nhấn thì nó sẽ tải changepass.template.php. Đây là mã im sử dụng cho điều đó.

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

Câu hỏi của tôi là cách hiển thị GIF Animation (loading.gif) trong khi trang changepass.template.php được tải đầy đủ. Hãy cho tôi một số lời khuyên mã Xin vui lòng.

Answer 1

Có nhiều cách tiếp cận để thực hiện việc này. Một cách đơn giản để làm:

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

JS:

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

Sửa display: block-show() sau khi gợi ý từ James Wiseman :)

Answer 2

Thay rằng đặt kiểu

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

Chỉ cần sử dụng .hide() và. show() phương pháp.

Các tài khoản này dành cho định nghĩa bảng định kiểu mặc định cho các phần tử HTMl. Bạn có thể không muốn hiển thị 'khối' cho hình ảnh. Có thể có vô số phong cách hiển thị khác nhau có thể cho một phần tử:

http://www.w3schools.com/htmldom/prop_style_display.asp

Answer 3

bạn có thể gọi một số phương pháp để hiển thị tải gif sau khi gọi tải và giấu nó bằng cách sử callback trong chức năng tải:

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

Answer 4

Để làm cho nó mạnh mẽ hơn một chút, ví dụ: bạn quên thêm

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

vào html, bạn cũng có thể làm điều này trong jQuery, một cái gì đó như:

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

Điều này sẽ tự động thêm div.

Chỉ cần kích hoạt sự kiện này trên sự kiện nút onclick.

Làm cho nó ít bị lỗi hơn một chút.