裝載機.gif過早隱藏

Question

我該怎麼辦？

我試圖顯示一個加載器圖像，而圖像被從Flickr的服務器拉到水車輪播。一旦這組圖像最終加載到手風琴和水車中，加載器圖像將被隱藏。

什麼問題？

加載程序圖像過早隱藏，導致不向用戶提供圖像仍在加載的指示。這些圖像需要6-10秒的時間才能加載到手風琴的每一部分內，這足以讓用戶離開頁面。

我看到在Firefox和Chrome中都出現了這個問題。奇怪的是，有一些非常罕見的情況，當加載鏡像實際上停留在圖像完全加載之前。

我做了什麼？

我在我的兩個JavaScript函數中試驗了$("#loader").hide();的位置。

1. 在函數回調中，但在調用帶有配置設置的水車插件之後。
2. 函數回調之外，但在displayContent()之內。
3. 無處。我想我希望它會自動隱藏後圖像加載...：P

您可以查看照片庫和標記/腳本here。以下是主要腳本和標記。

HTML

<!-- lines 348-364 --> 
<!-- Tabs --> 
<ul id="tabs"> 
    <li><a href="#" name="tab1">Glass Windows</a></li> 
    <li><a href="#" name="tab2">Lampshades</a></li> 
    <li><a href="#" name="tab3">Metal and Glass Sculptures</a></li> 
    <li><a href="#" name="tab4">Pi&ntilde;atas</a></li> 
    <li><a href="#" name="tab5">Wood Sculptures</a></li> 
</ul> 
<!-- Content in the accordion --> 
<div id="content"> 
    <img src="images/loader.gif" id="loader"/> 
    <div id="tab1" class="thumbs"></div> 
    <div id="tab2" class="thumbs"></div> 
    <div id="tab3" class="thumbs"></div> 
    <div id="tab4" class="thumbs"></div> 
    <div id="tab5" class="thumbs"></div> 
</div> 

的JavaScript

// lines 264-293 
// 
$('#' + tabName).jflickrfeed({ 
    limit: 20, 
    qstrings: { 
     set: photoSet, 
     nsid: '85496792@N03' 
    }, 
    useTemplate: false, 
    itemCallback: function(item){ 
      $(this).append("<a href='" + item.link + "' target='" + "_blank'" + ">" 
         + "<img src='" + item.image_n + "' alt=''/></a>"); 
    } 
}, function (data) { 

    // Special carousel stuff to make the 
    // showcase look spiffy 
    // 
    $('#' + tabName).waterwheelCarousel({ 
     speed: 500, 
     separation: 200, 
     flankingItems: 3 
    }).css('position', ''); 

    // Once the waterwheel is finished loading 
    // we can hide the loader 
    // 
    $("#loader").hide(); 
}); 

注意：該網站仍然是目前正在準備 「有求必應」 的測試，這樣的事情可能會有所不同屏幕上有點粗糙尺寸...

Answer 1

完全忽略Image對象中的complete功能。這似乎工作，雖然它在Opera和Safari中有點錯誤，因此所有「隱藏」代碼都會在底部的條件塊中進行。

$('#' + tabName).jflickrfeed({ 
     limit: 10, 
     qstrings: { 
      set: photoSet, 
      nsid: '118934683@N02' 
     }, 
     useTemplate: false, 
     itemCallback: function(item) { 

     // Where all the action is... 
     // 
     $(this).append("<a class=\"fancybox\" href='" + item.image_b + "' title='(ID# " + item.title + ")'>" + "<img src='" + item.image_n + "' alt='image'/></a>"); 

     // Store the source of the image and convert it 
     // to a string. Keep track of the count too 
     // 
     var img = new Image(); 
     img.src = item.image_n.toString(); 

     photoCount++; 

     // Hide loader gif 
     // 
     if (photoCount == 10 && img.complete === true) { 
      $('#loader').css('visibility', 'invisible'); 
      $('#loader').css('top', 10000).css('left', 10000); 
      $('#loader').hide(); 
     } 
    } 
}); 

Answer 2

我會嘗試這樣的事情在你的$('#' + tabName).jflickrfeed({});功能

itemCallback: function(item){ 
     $("#loader").show(); //Show the loading Icon 
     $(this).append("<a href='" + item.link + "' target='" + "_blank'" + ">" 
        + "<img src='" + item.image_n + "' alt=''/></a>"); 
} 

然後保持$("#loader").hide();在腳本 第一圖像加載後也許它隱藏裝載機IMG結束，但從來沒有被觸發，以示對圖像的其餘部分。

其顯而易見，閃爍饋送函數會逐一調用每個圖像。

Answer 3

我想我知道問題出在哪裏...... jflickerfeed獲取圖像的數據，但不是圖像，所以，你添加它們，然後瀏覽器纔會請求實際獲取圖像。所以，你看到的延遲是從閃爍服務器實際下載的圖像。現在，如果是這樣的話，你需要綁定一些東西到圖像的加載事件，並計算你有多少。事情是這樣的：

total_images = 0; 
loaded_images = 0; 
$('#' + tabName).jflickrfeed({ 
    limit: 20, 
    qstrings: { 
     set: photoSet, 
     nsid: '85496792@N03' 
    }, 
    useTemplate: false, 
    itemCallback: function(item){ 
      total_images = total_images+1; 
      img = $('<img>').on('load',function(){ 
       loaded_images = loaded_images+1; 
       it (total_images == loaded_images) $('#loader').hide(); 
      }).attr('src',item.image_n); 
      anchor = $('<a>').attr('href',item.link).attr('target','_blank'); 
      anchor.append(img); 
      $(this).append(anchor); 
    } 
}, function (data) { 

    // Special carousel stuff to make the 
    // showcase look spiffy 
    // 
    $('#' + tabName).waterwheelCarousel({ 
     speed: 500, 
     separation: 200, 
     flankingItems: 3 
    }).css('position', ''); 
}); 

我不知道這是否是問題，但它是有道理的：P

編輯：你需要想一點點，因爲你有一個以上的標籤，但這是主意