У мене є попередній завантажувач jQuery, завантажений у мій html-файл:
<script type="text/javascript">
jQuery.noConflict()(function($){
$(".view").preloader();
$(".flexslider").preloader();
});
</script>
Мій jquery.preloader.js
// JavaScript Document
$.fn.preloader = function(options){
var defaults = {
delay:200,
preload_parent:"a",
check_timer:300,
ondone:function(){ },
oneachload:function(image){ },
fadein:500
};
// variables declaration and precaching images and parent container
var options = $.extend(defaults, options),
root = $(this) , images = root.find("img").css({"visibility":"hidden",opacity:0}) , timer , counter = 0, i=0 , checkFlag = [] , delaySum = options.delay ,
init = function(){
timer = setInterval(function(){
if(counter>=checkFlag.length)
{
clearInterval(timer);
options.ondone();
return;
}
for(i=0;i<images.length;i++)
{
if(images[i].complete==true)
{
if(checkFlag[i]==false)
{
checkFlag[i] = true;
options.oneachload(images[i]);
counter++;
delaySum = delaySum + options.delay;
}
$(images[i]).css("visibility","visible").delay(delaySum).animate({opacity:1},options.fadein,
function(){ $(this).parent().removeClass("preloader"); });
}
}
},options.check_timer)
} ;
images.each(function(){
if($(this).parent(options.preload_parent).length==0)
$(this).wrap("<a class="preloader" />");
else
$(this).parent().addClass("preloader");
checkFlag[i++] = false;
});
images = $.makeArray(images);
var icon = jQuery("<img />",{
id : "loadingicon" ,
src : "/assets/images/front/spinner.gif"
}).hide().appendTo("body");
timer = setInterval(function(){
if(icon[0].complete==true)
{
clearInterval(timer);
init();
icon.remove();
return;
}
},100);
}
Але коли я запускаю це, я отримую "$ не визначено" і вказує на цей рядок:
var options = $.extend(defaults, options),
Але ось дивна річ - якщо я завантажую jQuery 1.7.2 TWICE у свій html-файл, помилка усувається, і все працює як очікувалося (включаючи попередній завантажувач).
Питання: як це виправити, тому мені не потрібно завантажувати jQuery двічі, щоб зробити цю роботу ??
Відповіді:
2 для відповіді № 1preloader.js повинен бути в готовому блоці.
(function($) {
$.fn.preloader = function(options) {
// your code here.
}
})(jQuery);
2 для відповіді № 2
Ви виконуєте noConflict
інструкція, завдяки якій jQuery відновлює $
до початкового значення (зазвичай undefined
). Видалити .noConflict()
. По черзі перепишіть $.extend
в jQuery.extend
(за межами безконфліктного режиму, $
це лише короткий синонім для jQuery
), $(this)
в jQuery(this)
і т. д.
1 для відповіді № 3
У вас є кілька питань:
Ви повинні зачекати, поки DOM буде готовий, перш ніж посилатися на елементи в ньому. Якщо наданий вами код не знаходиться в кінці тега body, тоді вам потрібно ввести код у
document.ready
блокКоли ви використовуєте
jQuery.noConflict()
, ви більше не можете користуватися$
до посиланняjQuery
. Натомість ви повинні використовувати символjQuery
.Якщо ви хочете використовувати
$
знову можна пройтиjQuery
до функціонального блоку самовиконання, який призначитьjQuery
до$
символ всередині функціонального блоку, який дозволить вам використовувати його там, але не заважатиме жодному іншому коду.
Ось що я б запропонував:
<script type="text/javascript">
jQuery.noConflict();
(function($){
// you can now use $ here as a reference to jQuery
// again inside this function
$(document).ready(function() {
$(".view").preloader();
$(".flexslider").preloader();
});
})(jQuery);
</script>