jQuery显示加载图像，而gif加载

我的网站上有一个非常简单的功能，当页面加载时显示一个静态图像，如果你想看到gif，那么你点击图像，它加载和开始显示一次加载。jQuery显示加载图像，而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/

然而，图档是15MB，因此需要一段时间，为他们加载并开始播放，怎么办我在等待时让图像变成加载图像，以便人们知道发生了什么事情？

来源

2014-03-07 Gavin Mannion

我不知道我得到了它，但你说你要使用15兆字节的loadind GIF？如果是这样，那只是疯狂。 –

不，我正在加载一个15Mb的gif，我想使用加载图像之间的静态文件加载正常和gif .. 因此，页面加载一张不错的图片，我点击它，并加载图片取代它的地方然后gif开始时，它完成加载 –

哦，好的抱歉。明确。 –

替换此代码：

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;

来源

2014-03-07 10:22:04

难道你不是指我应该改变.gif来做这件事吗？这样它加载加载gif？我是否也应该改变$ el.attr来加载我的大型gif呢？ –

我加了评论就更清楚了。 –

你的回答并不完全正确，但它让我朝着正确的方向......我需要将img.src设置为我想加载的新文件..然后在onload函数中设置$ el的srouce img的来源，它的工作。 –

jQuery显示加载图像，而gif加载

回答

相关问题