需要帮助通过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. 在加载函数invokeMultipleCycle和showWork之前，等待ajax请求完成。

2. 在动画发生之前，添加绝对位于.workContent上方的ajax加载动画。

请牢记两件事：

1. 页面上有多个.workSnippets。
2. 内容在 中加载在workSnippet中，但另一个div称为#work。

您将看到我已尝试尝试使用ajaxComplete函数。但是，它似乎不起作用。也许这是因为ajax请求完成但图像仍然需要“加载”？

非常感谢您的帮助。

谢谢，

史蒂夫

Answer 1

  

也许这是因为ajax   请求完成但图像仍然   需要“加载”？

是。您必须在图像加载后执行动画。我无法想到一种方法可以做到这一点;我认为研究类似于document.ready（）的解决方案。