Нужна помощь при загрузке контента через 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. Перед тем, как анимация произойдет, добавьте анимацию загрузки ajax, расположенную абсолютно выше.workContent.

Примите во внимание две вещи:

1. На странице имеется несколько .workSnippets.
2. Контент не загружен в workSnippet, но другой div называется # work.

Вы увидите, что я уже пытался попытаться использовать функцию ajaxComplete.Тем не менее, это не похоже на работу.Возможно, это связано с тем, что запрос ajax завершается, но изображение по-прежнему необходимо «загрузить»?

Ваша помощь будет наиболее ценной.

Спасибо,

Стив

Answer 1

Возможно, это из-за того, что запрос ajax завершается, но изображение все еще должно загружаться?

Да.Вы должны сделать анимацию после загрузки изображений.Я не могу придумать, как сделать это на макушке головы;Я думаю, что поиск в чем-то похожем на document.ready () является решением.