Gifs, Javascript và nhiều trường hợp

Question

Có thể là một câu hỏi ngớ ngẩn nhưng ở đây đi anyway.

Ví dụ: Giả sử tôi có một GIF động không lặp và tôi có hai phần tử img.

<img src="" id="slot1" /> 
<img src="" id="slot2" /> 

Vì vậy, tôi sử dụng một chút javascript để thay đổi nguồn của vị trí1.

function changE(x) 
{var image=document.getElementById (x); 
image.src="animated.gif"; 
} 

someButtonGotClicked=changE('slot1'); 

hoạt động tốt. Gif đóng từ đầu đến kết thúc nhưng nếu tôi sau đó thay đổi src của slot2 đến gif giống nhau:

changE('slot2'); 

slot1 reset nó gif trở lại bắt đầu để đồng bộ với slot2 bắt đầu đó là gif.

Bây giờ tôi biết mình có thể sao chép gif và có 2 tệp riêng biệt để sử dụng và tôi biết về trang tính nhưng tôi tò mò Nếu tôi có thể sử dụng một bản sao gif và sử dụng nhiều lần trên một trang mà không có tất cả các trường hợp của gif được khởi động lại mỗi khi một phần tử img khác nhận được cùng một tệp với src?

Hy vọng điều đó không gây nhầm lẫn. Cảm ơn.

Answer 1

Khi hình ảnh được tải trong bộ nhớ, tất cả các đối tượng khác yêu cầu hình ảnh đó, sử dụng cùng một URL, hãy tham khảo hình ảnh từ bộ nhớ cache của trình duyệt. Điều này tránh tải cùng một hình ảnh nhiều lần. Trong trường hợp gif, một trong các dữ liệu meta cần theo dõi là khung hiện tại, được lưu trữ không ở phần tử dom <img>, mà là ở cấp trình duyệt trong cấu trúc mà nó sử dụng để lưu trữ gif đó.

Khi tải, chỉ mục khung đó được đặt lại. Vì vậy, trong khi trình duyệt đang xử lý vòng gif, tải hình ảnh thứ hai sẽ đặt chỉ mục khung hiện tại về đầu, do đó cả hai hình ảnh đều đồng bộ hóa.

Đây là triển khai trình duyệt và có vẻ như hầu hết các trình duyệt đều tuân theo triển khai này. Một lợi thế của việc này là nếu bạn có hàng nghìn gif nhỏ (từ cùng một URL) trong một trang, trình duyệt sẽ thực hiện ít tính toán hơn để hiển thị chúng, vì nó sẽ chỉ thay đổi một chỉ mục khung chứ không phải hàng nghìn.

Chỉnh sửa: Để khắc phục mã của bạn, bạn phải thêm cơ bản ngẫu nhiên vào cuối hình ảnh của mình.

function changE(x) 
{var image=document.getElementById (x); 
image.src="animated.gif?" + Math.random(); 
} 

Vì vậy, trình duyệt cho rằng đây là một hình ảnh khác (ví dụ: URL khác).

Answer 2

Hãy thử sử dụng một giải pháp như vậy:

<img src="" id="slot1" class="animate" /> 
<img src="" id="slot2" class="animate" /> 


(function(doc, w) { 
    var changE, getElementsByClassName; 

    changE = function(img) { 
     img.src = "animated.gif"; 
    }; 
    getElementsByClassName = function(node, classname) { 
     if (node.getElementsByClassName) { // use native implementation if available 
      return node.getElementsByClassName(classname); 
     } else { 
      return (function getElementsByClass(searchClass, node) { 
       if (node == null) 
        node = doc; 
       var classElements = [], 
        els = node.getElementsByTagName("*"), 
        elsLen = els.length, 
        pattern = new RegExp("(^|\\s)" + searchClass + "(\\s|$)"), i, j; 

       for (i = 0, j = 0; i < elsLen; i++) { 
        if (pattern.test(els[i].className)) { 
         classElements[j] = els[i]; 
         j++; 
        } 
       } 
       return classElements; 
      })(classname, node); 
     } 
    }; 
    w.onload = function() { 
     var imgs, i = 0, l; 
     imgs = getElementsByClassName(doc, 'animate'); 
     l = imgs.length; 
     for (i; i < l; i++) { 
      imgs[i].onclick = function(e) { changE(this); }; 
     } 
    }; 
})(document, window); 

này sẽ thiết lập một sự kiện clicke cho mỗi hình ảnh với tên calss animate và sự kiện nhấp chuột sẽ chỉ ảnh hưởng đến hình ảnh cụ thể nhấp vào.