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;

jQuery在gif加载时显示加载图像

1 个答案: