需要帮助通过ajax加载内容

Consider the following script:

请考虑以下脚本：

  $(".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();

    });

On my page, there are multiple 'thumbnails' called .workSnippet. When you click one of these, I want it to load content via ajax. It selects what content to load in conjunction with the index function. I have this working absolutely fine.

在我的页面上，有多个名为.workSnippet的“缩略图”。当您单击其中一个时，我希望它通过ajax加载内容。它选择与索引函数一起加载的内容。我的工作非常好。

The problem is, it's a little messy. When you click .workSnippet it runs an animation, however the high quality image loads slowly whilst the animation is taking place.

问题是，它有点乱。当您单击.workSnippet时，它会运行动画，但是在动画发生时高质量图像会缓慢加载。

What I want to do:

我想做的事：

1. Wait for the ajax request to complete before loading the functions invokeMultipleCycle and showWork.

   在加载函数invokeMultipleCycle和showWork之前，等待ajax请求完成。

2. Before the animation occurs, add an ajax loading animation absolutely positioned above .workContent.

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

Please bear in mind two things:

请记住两件事：

1. There are multiple .workSnippets on the page.
2. 页面上有多个.workSnippets。
3. The content is not loaded in workSnippet, but another div called #work.
4. 内容未加载到workSnippet中，而是另一个名为#work的div。

You will see I have already tried to attempt this uses the ajaxComplete function. However, it does not seem to work. Perhaps this is because the ajax request completes but the image still needs to 'load'?

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

Your help will be most appreciated.

非常感谢您的帮助。

Thanks,

谢谢，

Steve

史蒂夫

1 个解决方案

#1

Perhaps this is because the ajax request completes but the image still needs to 'load'?

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

Yes. You have to do the animation after the images load. I can't think of a way to do that off the top of my head; I think looking into something similar to document.ready() is the solution.

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