Как я кеширую выборки jQuery?

Question

Мне нужно кэшировать около 100 различных вариантов для анимации. Ниже приведен пример кода. Есть ли проблема синтаксиса во втором примере? Если это не способ кеширования выборок, то он, безусловно, наиболее популярен в сети. Итак, что мне не хватает?

note: p в $.path.bezier(p) ниже - это правильно объявленный объект, переданный в jQuery.path.bezier (кстати, потрясающая библиотека анимации)

Это работает

    $(document).ready(function() {
        animate1();
        animate2();
    })
    function animate1() {
        $('#image1').animate({ path: new $.path.bezier(p) }, 3000);
        setTimeout("animate1()", 3000);
    }
    function animate2() {
        $('#image2').animate({ path: new $.path.bezier(p) }, 3000);
        setTimeout("animate2()", 3000);
    }

Это не работает

    var $one = $('#image1'); //problem with syntax here??
    var $two = $('#image2');
    $(document).ready(function() {
        animate1();
        animate2();
    })
    function animate1() {
        $one.animate({ path: new $.path.bezier(p) }, 3000);
        setTimeout("animate1()", 3000);
    }
    function animate2() {
        $two.animate({ path: new $.path.bezier(p) }, 3000);
        setTimeout("animate2()", 3000);
    }

Answer 1

Если изображения не загружаются при их вызове, jQuery вернет пустой объект. Переместите свое назначение в функции document.ready:

$(document).ready(function() {
    var $one = $('#image1');
    var $two = $('#image2');
    animate1();
    animate2();
});
// ... etc.

Если вам необходимо кэшировать их для последующего использования вне сценария инициализации, добавьте их в объект хранения:

var my_storage_object = {};
$(document).ready(function() {
    var $one, $two;
    my_storage_object.$one = $one = $('#image1');
    my_storage_object.$two = $two = $('#image2');
    animate1();
    animate2();
});
// ... etc.

Затем, за пределами document.ready, вы можете позвонить:

my_storage_object.$one //still has a reference to the jQuery object.

Answer 2

Попробуйте это:

var $one;
var $two;
$(document).ready(function() {
    $one = $('#image1');
    $two = $('#image2');
    animate1();
    animate2();
})
function animate1() {
    $one.animate({ path: new $.path.bezier(p) }, 3000);
    setTimeout("animate1()", 3000);
}
function animate2() {
    $two.animate({ path: new $.path.bezier(p) }, 3000);
    setTimeout("animate2()", 3000);
}

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

Answer 3

Также объявления переменных должны быть снаружи, но селекторы должны быть внутри $ (document) .ready (), может быть, эти изображения еще не готовы?

edit, например:

var one;
var two;
$(document).ready(function() {
     one = $('#image1');
     two = $('#image2'); 
     animate1();
     animate2();
})

Answer 4

   var one = $('#image1');
   var two = $('#image2');
    $(document).ready(function() {
        animate1();
        animate2();
    })
    function animate1() {
        one.animate({ path: new $.path.bezier(p) }, 3000);
        setTimeout("animate1()", 3000);
    }
    function animate2() {
        two.animate({ path: new $.path.bezier(p) }, 3000);
        setTimeout("animate2()", 3000);
    }

исправление

когда вы делаете:

   var one = $('#image1');

вы храните объект jquery, возвращаемый селектором, в переменной "one". Так что вам больше не нужно использовать $.

Answer 5

Ваши селекторы jQuery всегда должны находиться внутри блока .ready(), так почему бы не поместить туда все ? Таким образом, вы ничего не оставляете в глобальной области видимости.

$(document).ready(function() {
    var storedGlobals = {
        $one: $('#image1'),
        $two: $('#image2')
    };
    animate1(); 
    animate2(); 

    function animate1() { 
        storedGlobals.$one.animate({ path: new $.path.bezier(p) }, 3000); 
        setTimeout("animate1()", 3000); 
    } 
    function animate2() { 
        storedGlobals.$two.animate({ path: new $.path.bezier(p) }, 3000); 
        setTimeout("animate2()", 3000); 
    }
});