2

Есть страница logic.php, которая делает выборку из БД.

Есть страница index.php, которая Ajax'ом подгружает данные из logic.php и выводит их. Здесь я подключаю jQuery и jQuery UI (для анимации цвета).

И когда содержимое загружено (эти шаги я опускаю), я выбираю:

$(document).ready(function() {
    $('li:first').animate({ 'background-color': "#FF9900", "opacity": "0.5" }, 1900).queue(function() {    
        $(this).css({ 'background': '', "opacity": "" }) 
    })
})

Этот код не срабатывает, а если пишу так:

$(document).ready(function() {
    setTimeout(function() {
        $('li:first').animate({ 'background-color': "#FF9900", "opacity": "0.5" }, 1900).queue(function () {    
            $(this).css({ 'background': '', "opacity": "" }) 
        })
    }, 100);
})

То этот код срабатывает.

Как добиться того, чтобы все библиотеки уже были подгружены и мне не приходилось бы прописывать setTimeout?

2 ответа 2

2

$( document ).ready() выстреливает после загрузки и создания DOM, т.е. голого HTML - набора тэгов. Все внешние скрипты, картинки и шрифты к этому моменту еще не успевают подгрузиться. ПОЛНАЯ загрузка отмечается событием window.onload, вот к нему-то и привязывайтесь:

window.onload = function () { 
    //тут анимация ваша 
}

Или на JQ:

$( window ).load(function() {
  // Run code
});

Альтернативно, можно использовать PreloadJS, чтобы управлять очередностью загрузки и выполнения событий.

2
  • опробывал то что вы пишете,фиг его знает,в общем не работает :( Commented 7 июл. 2015 в 10:22
  • @vasily_dumov для того, чтобы ответы точно решали вашу проблему, в вопросе должен быть код, воссоздающий проблему.
    – Regent
    Commented 7 июл. 2015 в 10:47
1

Вам нужно вызывать код

$('li:first').animate({ 'background-color': "#FF9900", "opacity": "0.5" }, 1900).queue(function() {    
    $(this).css({ 'background': '', "opacity": "" }) 
})

не в методе $(document).ready, а после вызова ajax-запроса, который меняет содержимое страницы:

$.ajax( "example.php" ).done(function(data){
    //...
    //ТУТ
})

Если таких вызовов несколько, то можно оформить ваш код в отдельную функцию и применять ее к новым кускам страницы после загрузки каждого из них.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.