Bắt đầu hoạt ảnh gif cho đến khi nó được tải hoàn toàn

Question

Tôi có hoạt ảnh gif lớn trên trang web và muốn bắt đầu hoạt ảnh cho đến khi tải xong. Làm thế nào mà có thể sử dụng JavaScript/jQuery?

Answer 1

Sử dụng hình ảnh giữ chỗ, và thay thế bằng các hoạt hình GIF lần GIF đó là nạp đầy đủ:

<img id="anim" src="placeholder.gif"> 

JS:

var myanim = new Image(); 
myanim.src = '/img/actions.png'; 
myanim.onload = function() { 
    document.getElementById('anim').src = myanim.src; 
}​ 

http://jsfiddle.net/mblase75/6XTg7/

Answer 2

Bạn có thể ẩn GIF với CSS (hoặc JS thay thế chúng bằng một placeholder) và khi GIF được nạp bạn có thể bắn chương trình()

$('img[src$=".gif"]').load(function(){$(this).show())

Answer 3

Bạn không có quyền kiểm soát hoạt ảnh gif thông qua javascript, vì vậy bạn phải triển khai một số loại hack. Bạn phải làm cho nó ẩn trong đầu. Thay vì hình ảnh thực tế bạn có thể đặt một div với kích thước của hình ảnh thực tế và với văn bản như "chờ đợi".

Khi hình ảnh được tải xuống trong trình duyệt, bạn có thể thay thế div bằng hình ảnh. Và tại thời điểm đó, hoạt ảnh sẽ bắt đầu

Answer 4

Bạn có thể ẩn nó cho đến khi được tải hoàn toàn.

<!--- this uses jquery !--> 

<script type="text/javascript"> 

    var image_url = "http://media.tumblr.com/tumblr_m4doax3R071r9c1z7.gif"; 

    var image = $('<img />').load(function(){ 

     $(this).show(); 

    }).attr('src', image_url).hide(); 

    $('body').append(image); 

</script> 

Vấn đề ở đây là khi hình ảnh đã được tải về (nghĩa là nó là trong bộ nhớ cache trình duyệt), có thực sự dường như không có cách nào để bắt đầu nó từ một khung cụ thể.