需要帮助通过 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 中，而是加载了另一个名为 #work 的 div。

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

您的帮助将不胜感激。

谢谢，

史蒂夫

Answer 1

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

是的。您必须在图像加载后执行动画。我想不出办法做到这一点。我认为寻找类似于 document.ready() 的东西是解决方案。