jQuery让GIF图片默认为静态图片，鼠标经过时显示动态，不仅仅在WordPress，基本所有网页上GIF图片默认是显示动态的，这样如果多了，就会让网页很卡，也会消耗资源的，所以我研究了一下怎么让GIF像视频一样，显示个缩略图，等鼠标经过或者点击播放的时候播放动态图片。

首先我们来屡一下思路：
1、假设GIF图片像视频一样都是由帧组成的，我们获取其中一帧来做缩略图，嗯，在CSS3时代我们可以用canvas画出来；
2、这个时候就得由两个图片来切换了，一个是缩略图，一个是原始图片，当鼠标经过时自动播放GIF图片；

有了这个思路，我们来编写对应的函数：

一、默认html中架构：

<img src="https://hilau.com/wp-content/uploads/2019/09/canvas.gif" class="gif" />

二、用canvas画出其中一帧来做缩略图：

    // 动态图片转静态
    function aniToReview(e){
        $(e).each(function () {
            var canvas = document.createElement('canvas'),
                ctx = canvas.getContext("2d"),
                base64 = '',
                aniUrl = this.src;
		//canvas.setAttribute('crossOrigin', 'anonymous');
            $(this).one('load', function () {
                canvas.width = this.width;
                canvas.height = this.height;
                ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
                base64 = canvas.toDataURL("image/png");
                var reviewUrl = URL.createObjectURL(base64)
                $(this).attr({
                    'src': reviewUrl,
                    'realsrc': aniUrl
                });
            });
        })
    }
    aniToReview('.gif');

这里如果不能将现在的图片的地址转换成静态地址，显示toDataURL转换不了，在服务器上试试，有时候本地会出现这样的问题；

三、当鼠标经过时动态与静态之间的变化

    // 鼠标经过时静态图片转动态
    $(document).on('mouseover','.gif',function () {
        var reviewImg = $(this).attr('src'),
            aniImg = $(this).attr('realsrc');
        $(this).attr({'src': aniImg, 'realsrc': reviewImg});
    })
    $(document).on('mouseout','.gif',function () {
        var reviewImg = $(this).attr('realsrc'),
            aniImg = $(this).attr('src');
        $(this).attr({'src': reviewImg, 'realsrc': aniImg});
    })

四、上述代码是针对一张图片处理是可以的

譬如在WordPress，我们每篇文章都有GIF图片，或者我首页缩略图全部是GIF图片，我不可能一个个都加上class=gif，当然不嫌麻烦也是可以的。所以我们判断一下，当有gif图片的时候才会触发上述的效果：

	//判断图片是否是GIF图片
	function isAssetTypeAnImage(ext) {
	  return ['gif'].indexOf(ext.toLowerCase()) !== -1;
	}
	//如果是GIF图片，添加div以及class="gif"
	$('img').each(function(){
		var gifPath = $(this)[0].src;
		var	gifIndex = gifPath.lastIndexOf(".");
		var	gifExt = gifPath.substr(gifIndex+1);
			if (isAssetTypeAnImage(gifExt)) {
				$(this).wrap("<div class='gifWrap'></div>").parent();
				$(this).after('<ins class="play-gif">gif</ins>');
				$(this).addClass('gif');
			}
	}); 

五、总结一下

当网页有img标签的时候，我们首先判断其是不是GIF图片，如果是，触发我们动态变静态函数，并且鼠标经过会在动态与静态切换。所以这个JQ小插件就出来了（可以保存为gifpreview.js，然后在网页中引入，当然这个必须基于jquery库）：

	//判断图片是否是GIF图片
	function isAssetTypeAnImage(ext) {
	  return ['gif'].indexOf(ext.toLowerCase()) !== -1;
	}
	//如果是GIF图片，添加div以及class="gif"
	$('img').each(function(){
		var gifPath = $(this)[0].src;
		var	gifIndex = gifPath.lastIndexOf(".");
		var	gifExt = gifPath.substr(gifIndex+1);
			if (isAssetTypeAnImage(gifExt)) {
				$(this).wrap("<div class='gifWrap'></div>").parent();
				$(this).after('<ins class="play-gif">gif</ins>');
				$(this).addClass('gif');
			}
	}); 
	
	//dataURLtoBlob("a.gif");
    // base64 转 blob
    function dataURLtoBlob(dataurl) {
        var arr = dataurl.split(','),
            mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]),
            n = bstr.length,
            u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], {
            type: mime
        });
    }

    // 动态图片转静态
    function aniToReview(e){
        $(e).each(function () {
            var canvas = document.createElement('canvas'),
                ctx = canvas.getContext("2d"),
                base64 = '',
                aniUrl = this.src;
				canvas.setAttribute('crossOrigin', 'anonymous');
            $(this).one('load', function () {
                canvas.width = this.width;
                canvas.height = this.height;
                ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
                base64 = canvas.toDataURL("image/png");
                var reviewUrl = URL.createObjectURL(dataURLtoBlob(base64))
                $(this).attr({
                    'src': reviewUrl,
                    'realsrc': aniUrl
                });
            });
        })
    }
	aniToReview('.gif');
    // 鼠标经过时静态图片转动态
    $(document).on('mouseover','.gif',function () {
        var reviewImg = $(this).attr('src'),
            aniImg = $(this).attr('realsrc');
        $(this).attr({'src': aniImg, 'realsrc': reviewImg});
		$('.play-gif').fadeOut(100);
    })
    $(document).on('mouseout','.gif',function () {
        var reviewImg = $(this).attr('realsrc'),
            aniImg = $(this).attr('src');
        $(this).attr({'src': reviewImg, 'realsrc': aniImg});
		$('.play-gif').fadeIn(100);
    })

最后，补充下对应css样式：

	ins.play-gif{
		box-sizing:border-box;
		position:absolute;
		top:50%;
		margin-top:-20px;
		left:50%;
		margin-left:-20px;
		min-height:40px;
		min-width:40px;
		text-align:center;
		background:#222;
		line-height:34px;
		font-size:14px;
		text-transform:uppercase;
		color:#fff;
		border-radius:50%;
		opacity:.9;
		border:3px solid #fff;
		cursor:pointer;
		text-decoration:none;
	}
	ins.play-gif:hover{
		opacity:.5;
	}
	.gifWrap{
		position:relative;
		display:inline-block;
	}

大功告成！如果需要的可以自己试试，然后演示可以见本站效果！