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;