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加載

回答

相關問題