需要幫助通過Ajax加載內容

Question

考慮以下腳本：

  $(".workSnippet").click(function () {

    //set variable portfolioCount based on index

    portfolioCount = $(".workSnippet").index(this);

    //load content based on portfolioCount

    $('#work #cycle' + portfolioCount).load("ajax-content/ajax-content.php #portfolioImage" + portfolioCount);

    // when loaded, run animation functions 

    $("#work").ajaxComplete(function(){

        //help required here

        setTimeout(invokeMultipleCycle, 200);

        showWork();

    });

在我的頁面上，有多個名為.workSnippet的“縮略圖”。 當您單擊其中之一時，我希望它通過ajax加載內容。 它結合索引功能選擇要加載的內容。 我的工作絕對正常。

問題是，這有點混亂。 當您單擊.workSnippet時，它將運行動畫，但是，在進行動畫時，高質量圖像會緩慢加載。

我想做的事：

1. 等待ajax請求完成，然后再加載函數invokeMultipleCycle和showWork。

2. 在動畫發生之前，添加絕對位於.workContent上方的ajax加載動畫。

請記住兩件事：

1. 頁面上有多個.workSnippets。
2. 內容未加載到workSnippet中，而是另一個div #work。

您將看到我已經嘗試使用ajaxComplete函數嘗試這種操作。 但是，它似乎不起作用。 也許這是因為ajax請求已完成，但圖像仍需要“加載”？

非常感謝您的幫助。

謝謝，

史蒂夫

Answer 1

也許這是因為ajax請求已完成，但圖像仍需要“加載”？

是。 圖像加載后，您必須進行動畫處理。 我想不出一種方法來解決這個問題。 我認為解決方案類似於document.ready（）。