Có thể phát hiện hình ảnh động bên cạnh hình ảnh gif không?

Question

Có thể phát hiện hình ảnh động bên cạnh hình ảnh gif không?

Trong Internet Explorer, bạn có thể sử dụng sự kiện onload cho sự kiện này vì nó sẽ được kích hoạt cho every frame loaded (hành vi thay đổi trong IE8).

Nhưng có cách nào cho các trình duyệt khác không?

Answer 1

Tôi không biết cách nào để làm điều đó ở phía khách hàng, nhưng tôi không chắc chắn về điều đó. Những gì bạn có thể làm, là phân tích mã HTML và bất kỳ gif được tham chiếu nào ở phía máy chủ và thêm lớp vào những hình ảnh này. Nhưng điều đó không thực sự được đề xuất vì nó liên quan đến ít nhất một phân tích cú pháp phân tích cú pháp HTML + của mỗi gif. Như bạn có thể thấy từ this example in PHP, việc kiểm tra gif cũng không đáng kể về tải CPU.

Answer 2

Tôi vừa viết một số JS để phát hiện các hình động. Hoạt động trong hầu hết các trình duyệt hiện đại trừ IE 9.

Tuyên bố từ chối trách nhiệm: điều này chỉ hoạt động nếu tên miền của hình ảnh giống với trang bạn đang tải tập lệnh.

Xem các ý chính cho phiên bản mới nhất của mã: https://gist.github.com/3012623

function isAnimatedGif(src, cb) { 
    var request = new XMLHttpRequest(); 
    request.open('GET', src, true); 
    request.responseType = 'arraybuffer'; 
    request.addEventListener('load', function() { 
     var arr = new Uint8Array(request.response), 
      i, len, length = arr.length, frames = 0; 

     // make sure it's a gif (GIF8) 
     if (arr[0] !== 0x47 || arr[1] !== 0x49 || 
      arr[2] !== 0x46 || arr[3] !== 0x38) 
     { 
      cb(false); 
      return; 
     } 

     //ported from php http://www.php.net/manual/en/function.imagecreatefromgif.php#104473 
     //an animated gif contains multiple "frames", with each frame having a 
     //header made up of: 
     // * a static 4-byte sequence (\x00\x21\xF9\x04) 
     // * 4 variable bytes 
     // * a static 2-byte sequence (\x00\x2C) (some variants may use \x00\x21 ?) 
     // We read through the file til we reach the end of the file, or we've found 
     // at least 2 frame headers 
     for (i=0, len = length - 9; i < len, frames < 2; ++i) { 
      if (arr[i] === 0x00 && arr[i+1] === 0x21 && 
       arr[i+2] === 0xF9 && arr[i+3] === 0x04 && 
       arr[i+8] === 0x00 && 
       (arr[i+9] === 0x2C || arr[i+9] === 0x21)) 
      { 
       frames++; 
      } 
     } 

     // if frame count > 1, it's animated 
     cb(frames > 1); 
    }); 
    request.send(); 
}