Javascript 是否可以在客户端检测动画gif图像？

是否可以在客户端检测动画gif图像

在Internet Explorer中，您可以为此使用

onload

事件，因为它将被触发（IE8中的行为已更改）

---

但是其他浏览器也有办法吗？

我不知道在客户端有什么办法，但我不确定。您可以做的是在服务器端解析HTML代码和任何引用的gif，并为这些图像添加一个类。但这并不推荐，因为它至少涉及一个额外的HTML解析+每个gif解析。从中可以看出，检查GIF在CPU负载方面也不是一件小事。

我刚刚编写了一些JS来检测动画GIF。适用于除IE9之外的大多数现代浏览器

免责声明：仅当图像的域原点与加载脚本的页面相同时，此选项才有效

有关最新版本的代码，请参见要点：

函数isAnimatedGif（src，cb）{
var request=new XMLHttpRequest（）；
打开（'GET'，src，true）；
request.responseType='arraybuffer'；
request.addEventListener（'load'，函数（）{
var arr=新的Uint8Array（请求.响应），
i、 len，length=arr.length，frames=0；
//确保它是gif（GIF8）
如果（arr[0]！==0x47 | | arr[1]！==0x49 | |
arr[2]！==0x46 | | arr[3]！==0x38）
{
cb（假）；
返回；
}
//从php移植http://www.php.net/manual/en/function.imagecreatefromgif.php#104473
//动画gif包含多个“帧”，每个帧都有一个
//标题由以下部分组成：
//*静态4字节序列（\x00\x21\xF9\x04）
//*4个可变字节
//*静态2字节序列（\x00\x2C）（某些变体可能使用\x00\x21？）
//我们通读文件，直到到达文件末尾，或者找到
//至少2个帧头
对于（i=0，len=length-9；i1，则设置动画
cb（帧>1）；
});
request.send（）；
}

我同意Residuum，我认为在JavaScription中没有任何方法可以做到这一点，我想，也许Canvas API可以实现这一点。只需每隔x毫秒采样一个图像，然后计算图像的哈希值。不太可靠，但它可以工作…如果所有帧都有相同的数据呢？然后gif将被检测为动画，而实际上它不是。一个简单（但更昂贵）的解决方案是实际比较帧数据，直到找到两个实际不同的帧数据。好的观点@Gautam如果你这样做，我会有兴趣看到一个实现！哈哈，不要屏住呼吸：这是一个值得考虑的问题。我预计自己不会很快实现它……它不应该是

I

？我可以确认它确实应该是

I

，否则我的浏览器在检查非动画gif文件时崩溃。

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();
}