使用ajax加載html，但隱藏內容直到加載

我使用jQuery在用戶單擊鏈接時動態加載內容。內容只是一堆圖像，然後設置爲以各種幻燈片形式顯示。我的問題是，我似乎無法找到一種方式來顯示加載的內容只有在圖像完全加載後。我嘗試了幾種不同的解決方案，他們都似乎要麼破壞腳本，要麼就是不按我想要的方式工作。以下是我現在使用的代碼：使用ajax加載html，但隱藏內容直到加載

$(document).ready(function() { 

$("a#item").click(function() { 

    var projectName = $(this).attr('class'); 

    $("div.slideshow").css("display", "block"); 

    $("div.slideshow").load(projectName+".php", function() { 

     var slideshow = new Array(); 

     $("div.slideshow img").each(function() { 
      slideshow.push($(this)); 
     }); 

     startSlideshow(slideshow.shift()); 

     function startSlideshow(image) { 
      image.delay(400).fadeIn(150, function() { 
       if(slideshow.length > 0) {startSlideshow(slideshow.shift());} 
       else { $("div.slideshow").delay(400).fadeOut(200, function() {$("div.slideshow img").css("display", "none")}); } 

      }); 
     } 
    }); 

    return false; 

}); 

});

您還可以看到完整的演示站點位置：http://publicprofileproject.com/

任何投入將不勝感激！

來源

2012-04-24 Chris

找到一個插件來預先載入圖像的圖像。它可能會幫助你 – chepe263 2012-04-24 18:58:40

想法：創建一個額外的隱藏div（顯示：無）並插入img – chepe263 2012-04-24 19:03:16

您可以在JavaScript中創建一個圖像對象數組，將每個圖像加載到數組的一個元素中。將事件處理程序附加到圖像的onLoad事件。

在事件處理程序中，增加加載圖像的數量。當你的計數器達到陣列的長度時，瀏覽器將擁有所有的圖像。這是您可以顯示幻燈片的地方。

如果在頁面加載時執行此操作，則會在用戶單擊鏈接時預加載圖像，從而提供額外的優勢。

來源

2012-04-24 19:11:15

我想我明白你在說什麼。我認爲我的問題是，我在同一頁面上有幾個不同的「幻燈片」，每個用戶點擊鏈接時都會觸發。我仍然可以爲每個單獨的鏈接使用計數器嗎？如果您需要查看該頁面，我會在原始帖子中添加一個鏈接到正在運行的示例。感謝你的回答！ – Chris 2012-04-24 19:34:54

您可以在用戶點擊鏈接時執行此操作，但您無法獲得預加載的優勢。 – 2012-04-24 20:01:26

我相信這個問題已經回答了here。

總體思路是指定一個加載事件處理程序，以在指定source屬性之前顯示它。

或者，如果您的projects+".php"文件指定了現成的html標記中的圖像，那麼您應該能夠捕獲正在加載的文件中圖像的加載事件。將下面的僞代碼添加到正在加載的文件中。

$("img").load(function() { 
    // show the div on the page it is getting loaded into 
    alert("images should be loaded now"); 
});

你也許可以將它放在你原來的代碼段，並可能使用live/on結合事件的綁定。例如：$("img").on("load", function() {...

從load documentation：

負載事件被髮送到一個元件時，它和所有的子元件已經完全加載。這個事件可以發送到與URL相關的任何元素：圖像，腳本，框架，iframe和窗口對象。

編輯：

與圖像

面臨的共同挑戰時的負載情況下的

告誡開發商嘗試使用來解決：這樣做是什麼樣子，你正在做的有趣的沮喪.load（）快捷方式是在圖像（或圖像集合）完全加載時執行一個函數。有幾個已知的警告與此應該注意。它們是：

這並不一致，也不可靠地工作，跨瀏覽器的

它不正確的WebKit如果圖像的src設置爲相同的SRC像以前

它不火正確地泡了DOM樹

可以停止火已經生活在瀏覽器的緩存

來源

2012-04-24 19:11:26 veeTrain

這個解決方案在處理html時是否也可以工作？我在這個例子中看到它是一個圖片網址。 – Chris 2012-04-24 19:30:36

@paperbeatsscissors;我用你的另一種可能性更新了我的答案。我的選擇器比你的可能應該更模糊 - 你也許可以把這個捕獲事件放在原來的javascript中。 – veeTrain 2012-04-24 19:33:39

太棒了，我還沒有試過「on」選項。我嘗試將裝入事件綁定到幻燈片的開始處，但它變得非常不穩定，並且在項目列表的中間保持淡出。雖然，我完全有可能把它放在錯誤的地方...... – Chris 2012-04-24 19:44:42

使用ajax加載html，但隱藏內容直到加載

回答

相關問題