jQuery văn bản tải hình ảnh động

Question

Đang cố gắng để tạo ra một văn bản ... loading animation

đây là nơi tôi đứng: http://jsfiddle.net/aGfct/

Tôi có thể lấy ... để được thêm vào 500 khoảng ms, nhưng sau đó tôi muốn để loại bỏ chúng và sau đó bắt đầu các hình ảnh động trên/cho đến khi tải được thực hiện (về cơ bản nó có thể lặp mãi mãi, và tôi sẽ phai nó ra khi thực hiện).

Mọi trợ giúp đều tuyệt vời.

Cảm ơn.

_charlie

Answer 1

i = 0; 
setInterval(function() { 
    i = ++i % 4; 
    $("#loading").html("loading"+Array(i+1).join(".")); 
}, 500); 

Nếu bạn muốn thay đổi chuỗi sau 5 nói, đó là sau 10 lần lặp lại. Điều này có thể được thực hiện như thế này.

i = 0; 
text = "loading"; 
setInterval(function() { 
    $("#loading").html(text+Array((++i % 4)+1).join(".")); 
    if (i===10) text = "start"; 
}, 500); 

Answer 2

Chỉ cần thêm dòng này vào cuối vòng lặp của bạn:

i = (i === 3) ? 0 : i; 

Đó chỉ là viết tắt cho rằng 'nếu i bằng 3, đặt nó trở lại không, nếu không rời khỏi nó như nó là'. Điều đó sẽ khởi động lại vòng lặp của bạn cho đến khi bạn thiết lập một điều kiện thoát.

EDIT: Chờ đã, tôi đã không thực sự xem xét cách bạn nối thêm . (xin lỗi, không thể tải jsFiddle để chạy bất kỳ thứ gì vào lúc này)! Nếu bạn đã sử dụng đặt lại i như trên, bạn thực sự cần đặt số lượng . ký tự bằng i với mỗi lần lặp lại.

EDIT 2: Nhìn một lần nữa, bạn muốn thậm chí cần phải thực hiện i thành một đóng cửa để có được giá trị của nó tại thời điểm setTimeout được tuyên bố, nếu không bạn sẽ nhận được bất kỳ giá trị đó là khi setTimeout là thực hiện, không thể đoán trước được. Về cơ bản, không sử dụng giải pháp này - sử dụng Jeff's! ;)

Answer 3

Hãy thử sử dụng setInterval cũng nên như:

setInterval(function(){ 
    for (i = 1; i <= 3; i++) { 
     setTimeout(function() { 
     $("#loading").append("."); 
     }, i * 500); 
    } 
    $("#loading").html('loading'); 
}, 2000); 

Answer 4

http://jsfiddle.net/paska/aGfct/12/

var originalText = $("#loading").text(), 
    i = 0; 
setInterval(function() { 

    $("#loading").append("."); 
    i++; 

    if(i == 4) 
    { 
     $("#loading").html(originalText); 
     i = 0; 
    } 

}, 500); 

Answer 5

Tôi có giải pháp rất giống với roXon, chỉ trong trường hợp 2 tính năng tôi đã thêm.

1. Chỉ cần thêm một elemnt trống với id = loadingDots, như span id = "loadingDots">
2. Thêm lời gọi hàm trong document.ready. Bây giờ trong trường hợp của tôi, tôi cần phải hiển thị các dấu chấm tải trong một số trang nhưng không phải tất cả. Vì vậy, hàm sẽ tìm kiếm phần tử có id = loadingDots và nếu không tìm thấy, sẽ xóa khoảng thời gian.

Demo in JsFiddle

[HTML]

<!--Just have an element with id=loadingDots--> 
<span style="font-size:42px">Sending<span id="loadingDots"></span></span> 

[JS]

$(document).ready(function(){ 
    /**Call the function in document.ready somewhere*/ 
    showLoadingDots(); 
}); 

Chức năng

var showLoadingDots = function() { 
    /**If element not found, do nothing*/ 
    if (!$("#loadingDots").length>0) return false; 

    var showDots = setInterval(function(){    
     //Thanks to roXon, StackOverflow 
     var d = $("#loadingDots"); 
     d.text().length >= 3 ? d.text('') : d.append('.'); 
    },300); 
} 

Hop e nó giúp ai đó. Cảm ơn roXon, cho ý tưởng.