jQuery显示加载图像，而GIF负载

Question

我的网站上有一个非常简单的功能，它在页面加载时显示静态图像，如果您想查看 gif，则点击该图像，它会加载并在加载后开始显示。

如下

jQuery(".imgGif").each(function(index) {
jQuery(this).css( "cursor", "pointer" ); 
jQuery(this).click(function (index) {
    src = jQuery(this).attr('src');
    var extension = src.substr( (src.lastIndexOf('.') +1) );
     switch(extension) {
        case 'gif':
            jQuery(this).attr('src', src.substr(0, src.length-3) + 'jpg');
            break;
        case 'jpg': 
            jQuery(this).attr('src', src.substr(0, src.length-3) + 'gif');

            break;
        default:
            alert(extension);
            break;
        }
})
});

它有效，你可以在这里看到它， http://www.lazygamer.net/xbox-360/has-watchdogs-been-downgraded-since-e3-2012/

但是 gif 文件大小为 15mb，因此它们需要一段时间才能加载并开始播放，我如何在等待时将图像更改为加载图像，以便人们知道正在发生的事情？

Answer 1

替换此代码：

jQuery(this).attr('src', src.substr(0, src.length-3) + 'jpg');

与：

var $el = jQuery(this);

//save the original source in a variable
var src = $el.attr('src');

//replace the current source with a loading gif (i.e. http://preloaders.net/)
jQuery(this).attr('src', '/path/to/loading.gif');

//start loading the original image
var img = new Image();

//once the original image is loaded then replace the loading gif
img.onload = function () {
    $el.attr('src', src);
}
img.src = src;