jQuery .load（），直到加載圖像才顯示新內容

我一直在做jQuery照片幻燈片。它將圖像縮放到瀏覽器大小，並將它們左右滑動。沒有預先確定的大小或長寬比，腳本可以實時處理所有內容。它要求所有圖像都被完全加載，所以它可以根據自己的寬高比（width():height()等）自定義調整每個圖像的大小，計算包含div的寬度，並計算從一個圖像到另一個圖像的滑動距離。jQuery .load（），直到加載圖像才顯示新內容

作爲一個獨立的，它工作得很好（儘管我缺乏技能）！我只隱藏包含div的幻燈片(document).ready，允許加載圖像，然後運行幻燈片準備腳本(window).load。一旦完成，它只會使幻燈片div，圖像等出現，尺寸合適，定位並準備好滾動。

最終目標是能夠在不刷新頁面的情況下加載任意數量的幻燈片。這是爲了能夠播放不間斷的背景音樂。我知道網站上的音樂很煩人，但目標市場喜歡它，很多！

我使用

(target).load(page.php .element, function prepInsertNewShow() { 
    //Prepare slideshow 
    resizeImages(); 
    slideArray(); 
    //Show slideshow 
    (target).fadeIn(); 
});

，絕對有效！問題在於，我無法找到一種方法來阻止準備和顯示新內容，直到圖像加載完成。在圖像加載之前，它正在運行幻燈片準備腳本（完全依賴於圖像被完全加載）。這導致了一個完全站起來的節目！我想要做的是 -

(target).load(page.php .element, function prepInsertNewShow() { 
    //Wait until images are loaded 
    $('img').load(function() { 
     //Prepare slideshow 
     resizeImages(); 
     slideArray(); 
     //Show slideshow 
     (target).fadeIn(); 
    } 
});

但是，這似乎並不奏效，新的內容永遠不會顯示。

You can see a live version here。

初始畫廊正確加載，一切看起來不錯。唯一可用的導航鏈接是Galleries> Engagement，它將加載一個新的節目（一個包含多個<img>標籤的div）。您將看到圖像不居中，包含div和幻燈片的距離太小，因爲它們是使用未實際加載的圖像計算的。

有沒有什麼辦法可以延遲處理和顯示新內容，直到完全加載？任何建議將不勝感激，謝謝你的時間！

PS - 在我輸入此代碼時，發現一個體面的解決方案可能會將"width=x" height="x"插入到<img>標記中，所以腳本可以從這些值運行，即使圖像尚未加載... hmm。。

來源

2010-03-21 Jarred

嘗試做這樣的事情：

$.ajax({ 
    url: 'page.php', 
    success: function(data) { 
     var element = $(data).find('.element'); 
     element.find('img').addClass('loading').bind('load',function(){ 
      if (!element.find('img.loading').length) { 
        //Prepare slideshow 
        resizeImages(); 
        slideArray(); 
        //Show slideshow 
        $('#target').fadeIn(); 
      } 
     }); 
     $('#target').empty().append(element); 
    } 
});

來源

2010-03-21 17:49:18 PetersenDidIt

感謝您的答覆petersendidit！我確實玩過這種技術很長一段時間，並且取得了不同的成績。我已經開始工作了，但它每次都會凍結瀏覽器幾秒鐘。我認爲這是因爲它在每個單獨的圖像上完成了整個幻燈片準備程序，而不是整個集合的一次。

我實際上能夠解決這個問題，它非常容易，但它不一定回答原來的問題。

我只是將寬度和高度值插入到HTML中，然後腳本就可以在沒有加載圖像的情況下正確地格式化顯示，因爲它直接從標記獲取必要的數據，而不是圖像本身！這是我上面的'PS'思想。更好的是，我用來爲圖像提供服務的PHP應用程序（slideshowpro - 真棒），能夠自動插入這些值。噢是的。

我會說寫出這個問題的過程直接幫助我解決了我的問題，所以感謝那個stackoverflow！

來源

2010-03-21 20:13:06 Jarred

jQuery .load（），直到加載圖像才顯示新內容

回答

相關問題