Порядок загрузки и выполнения javascript

[Kotiara]

Доброго времени суток, ситуация такая есть сайт на joomla который пока стоит у меня на локальной машине. Проблема в следующем: при подгрузке скриптов mootools загружается последним (я так думаю из-за размера), и все зависимые от него скрипты вылетают. Что интересно в Opera все работает правильно скрипты выполняются именно в том порядке в котором они подгружаются в head-е, но стоит открыть сайт в лисе или хроме и все ломается, вопрос собственно в  том можно ли с этим что-то сделать, или может это из-за того что сайт на локальной машине? Заранее говорю проблема точно в порядке исполнения скриптов, на выяснение этого я потратил не мало времени и уверен в результате.

[Sla]

И как выявлял?

[Kotiara]

Сначала чуть голову конечно не сломал, все ведь есть все подгружено а, браузер ругается нету мол у window свойства addEven, да и вообще ни у кого такого свойства нету. А потом заметил что обработка некоторых событий сохранилась, я там делал обработку наведения мыши на ссылку и повесил прямо в хтмл
onmouseover="show_menu_wave('top_menu_wave_pink_b').

Код:

function show_menu_wave(wave_id)
{
  var wave=$$("#"+wave_id)[0];
  var display=wave.getStyle("display");
  if(display!="none")
    wave.setStyle("display","none");
  else
    wave.setStyle("display","block");
	window.addEvent('domready', function(){
		var mod_mt_listings=$$('.mod_mt_listings li');//.getSize();
		var _height=0;
		for( var mt_listing_index=0 ; mt_listing_index<mod_mt_listings.length ; mt_listing_index++ )
		{
			if(mod_mt_listings[ mt_listing_index].getSize().y> _height)
				_height=mod_mt_listings[ mt_listing_index].getSize().y;
		}
		mod_mt_listings=$$('.mod_mt_listings.tiles');
		mod_mt_listings[0].setStyles({height:  _height});
	});
}

Метод $$ создается mootools как и addEven, значит на момент обработки события эти методы уже были а, на момент попытки установить обработчик "window.addEvent('domready' " их еще просто не было.

[Sla]

ага

я не знаю mootools
Но... в двух словах,
объявили библиотеку
второе
на событие функцию onload и нужно вешать остальные функции

поэтому нельзя вешать функции на события не проинициализировав их.
Т.е. нужно что-то типа
$$.addevent(event,obj,func)
 

[Kotiara]

Не совсем понял что вы имели ввиду под $$.addevent(event,obj,func), но в любом случае я просто не могу повесть весь js  на событие загрузки окна, потому что кроме моего там еще и сторонние библиотеки которые запускаются сразу при загрузке и тоже используют mootools, вопрос в том нельзя ли как-то решить вопрос не перекраивая все, кроме того у меня есть небольшое сомнение на счет того что это может происходить из-за того что сайт стоит на локальном apach, ведь в инете никогда не сталкивался с подобным.

[Sla]

Еще раз
фреймворк должен проинициализироваться, т.е создать функцию (объект) $$

А у onmouseover прописывается handle функции
И он становится активным, сразу же как проинициализировался dom
Если чуть чуть подождать, то ошибок не будет - потому что загрузится mootools

вот как это происходит в jquery
$(document).ready(handler)

Т.е. в блоке ready прописываются все функции использующие событийные элементы

[Kotiara]

Я не знаю jQuery но на сколько я понимаю конструкция $(document).ready(handler) использует функции $ ready() которые создаются  jQuery по аналогии с такой же функцией из mootools, вопрос в том что эта функция еще не существует на момент выполнения других скриптов, кроме того у меня используется аналог лайтбокса под mootools который тоже отрабатывает раньше мутулса, и как мне сказать ему чтобы он дождался загрузки mootools прежде чем начнет работать? он ведь не по событию работать начинает, собственные скрипты то я могу перевесить на событие загрузки документа, проблема в том что в joomla модулях и компонентах часто густо используются сторонние библиотеки которые зависят от фреймворков, как с ними быть?
В любом случае мне уже кажется что проблема из-за того что сайт находится у меня на компе, возможно я где то неправильно настроил апач или пхп, я только что попробовал запустить один компонент на jQuery и получил туже проблему, хотя компонент точно рабочий.

[Sla]

Так я тебе об этом и толкую,
Это никак не зависит от типа сервера

Все должно быть проиницилизировано по onload

да знаю я эту безумную любовь джумлы и мутулса

[Kotiara]

Ну так в том то и вопрос, как заставить стороннюю библиотеку инициализировать то что ей там нужно инициализировать по onload?, cerabox например как только загружается начинает строить свой бокс и при этом активно пользуется функциями $(), $$() и addEvent(). Или fancybox который тоже самое творит только с использованием jQuery, они просто рушатся из-за того что начинают работать до того как подгрузится нужный фреймворк, каким образом вы предлагаете повесить их исполнение на onload, без полного перекраивания системы подгрузки скриптов joomla?
Хотя меня тут посетила одна мысль, у тега script есть свойство defer, которое должно откладывать исполнение скрипта до полной загрузки страницы, осталось найти как заставить джумлу проставлять это свойство для подгружаемых скриптов ну кроме фрейм ворков, тогда по идее получится что все чему присвоено это свойство будет выполнятся с задержкой.
И да по идее это не должно зависеть от сервера но я не вижу других вариантов, ведь на сайтах в инете таких проблем нету при использовании аналогичных скриптов. Я думаю что здесь дело в том как загружаются скрипты, в опере например все работает, скорее всего она либо грузит скрипты строго по очереди либо начинает их выполнять только когда подрузит все, а хром и лис видать начинают выполнять скрипты по принципу кто раньше встал того и тапки. Возможно у сервера есть настройка которая не позволяет одному клиенту грузить сразу несколько файлов с одного хоста, тогда проблема была бы решена.

[Sla]

нет, нет, и нет

Вот как это с использованием jquery
c mootools должно быть также

$(document).ready(function() {
    $("a.gallery").fancybox();
});

   window.addEvent('domready', function(){
      $$('.gallery a.ceraBox').cerabox();
   });

Только так

[Kotiara]

Вот код который у меня не работает

Код:

window.addEvent('domready', function(){
		var mod_mt_listings=$$('.mod_mt_listings li');
		var _height=0;
		for( var mt_listing_index=0 ; mt_listing_index<mod_mt_listings.length ; mt_listing_index++ )
		{
			if(mod_mt_listings[ mt_listing_index].getSize().y> _height)
				_height=mod_mt_listings[ mt_listing_index].getSize().y;
		}
		mod_mt_listings=$$('.mod_mt_listings.tiles');
		mod_mt_listings[0].setStyles({height:  _height});
	});

А вот еще одно место

Код:

<script type="text/javascript">
    window.addEvent('domready', function(){
        $$('<?php echo "#".$uniqid."  .mod_mt_listings_listing_".($i+1)." a.imgs_colors"; ?>').cerabox({titleFormat: 'изображение {number} / {total}'});
        $$('<?php echo "#".$uniqid."  a.top-listing-thumb-".$l->link_id; ?>').cerabox({titleFormat: 'изображение {number} / {total}'});
						});
</script>

Поправьте если я не прав но по моему они просто братья близнецы вашего кода

Код:

$(document).ready(function() {
    $("a.gallery").fancybox();
});

   window.addEvent('domready', function(){
      $$('.gallery a.ceraBox').cerabox();
   });

вопрос в том что где бы в документе или подгружаемом скрипте я не добавил вызов функции $(). $$(). или addEvent() кторые вы используете в своих примерах это вызовет ошибку, по скольку эти функции еще не добавлены в глобальное пространство имен по тому что не отработал фрейм ворк и я уже попробовал тоже самое с JQuery та же проблема.

[Sla]

opera, говроишь работает


Есть подозрение... не верно грузится фреймворк

проверь пути

[Kotiara]

Немного подумав мне кажется что вы меня не поняли.
вот код который не работает

Код:

<script type="text/javascript">
window.addEvent('domready', function(){
Uncaught TypeError: Object [object global] has no method 'addEvent'
		var my_tmp=$$('.listing-summary-item-2 a.listingimage');
		my_tmp.cerabox({titleFormat: 'изображение {number} / {total}'});
		$$('.listing-summary-item-2 a.imgs_colors').cerabox({titleFormat: 'изображение {number} / {total}'});
		//{displayTitle: false}
	});
</script>

Его я встраиваю прямо в документ а, вот код из подгружаемого файла

Код:

window.addEvent('domready', function(){
	var mod_mt_listings=$$('.mod_mt_listings li');//.getSize();
	var _height=0;
	for( var mt_listing_index=0 ; mt_listing_index<mod_mt_listings.length ; mt_listing_index++ )
	{
		if(mod_mt_listings[ mt_listing_index].getSize().y> _height)
			_height=mod_mt_listings[ mt_listing_index].getSize().y;
	}
	mod_mt_listings=$$('.mod_mt_listings.tiles');
	mod_mt_listings[0].setStyles({height:  _height});
});

И в списке подгружаемых файлов он находится ниже чем мутолс.
А вот код который у меня работает

Код:

<a class="top_menu_a" id="o-kompanii" href="/index.php/o-kompanii" target="_self" onmouseover="show_menu_wave('top_menu_wave_yellow'); show_menu_wave('top_menu_wave_pink_t');" onmouseout="show_menu_wave('top_menu_wave_yellow'); show_menu_wave('top_menu_wave_pink_t');">О компании</a>

А вот сама функция которая повешана на обработку

Код:

function show_menu_wave(wave_id)
{
  var wave=$$("#"+wave_id)[0];
  var display=wave.getStyle("display");
  if(display!="none")
    wave.setStyle("display","none");
  else
    wave.setStyle("display","block");
	////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
               // Здесь этот код отлично работает и браузеры на него не ругаются
	window.addEvent('domready', function(){
		var mod_mt_listings=$$('.mod_mt_listings li');//.getSize();
		var _height=0;
		for( var mt_listing_index=0 ; mt_listing_index<mod_mt_listings.length ; mt_listing_index++ )
		{
			if(mod_mt_listings[ mt_listing_index].getSize().y> _height)
				_height=mod_mt_listings[ mt_listing_index].getSize().y;
		}
		mod_mt_listings=$$('.mod_mt_listings.tiles');
		mod_mt_listings[0].setStyles({height:  _height});
	});
}

А работает это по тому что вызывается функция show_menu_wave() по событию наведение мыши а, значит только после окончательной загрузки документа, когда мутулс уже отработал и функции $(), $$(), addEvent() уже добавлены в глобальное пространство имен. Я могу повесить свои скрипты на событие окончание загрузки окна без помощи придоставляемой мутулсом функции addEvent(), но проблема в разных боксах и тому подобном, они при подгнузке строят боксы которые из дивов, которые просто не видно до поры из-за свойства display:none и делают они это с помошью функций предоставляемых фреймворками вроде все тех же $(), $$(), addEvent(), а на момент подгрузки кода этих боксов фреймворки еще не отработали и функций которые они вызывают в глобальном пространстве имен еще просто нету.

[Sla]

Не верю
Проверь пути
Проверь методы загрузки скриптов

[Kotiara]

Пути все верные, я ведь и в хроме и, в лисе через средства отладки вижу содержимое всех скриптов в разделе подгружаемых ресурсов. Это было первое что я проверил.

[Kotiara]

Ну вы прямо Станиславский.))) Как пути могут быть не верными если браузер показывает мне тексты скриптов при отладке?

[Sla]

просто вы говорите то, чего не должно быть
хотя и возможно,
Но почему я такого не встречал, на jquery, хотя бывает перегруженность скриптами.

Поэтому и делаю вывод, что ошибка в элементарной невнимательности, которую опера прощает

[Sla]

$doc = &JFactory::getDocument();
JHTML::_('behavior.mootools');
$doc->addScript('/components/com_myComponent/js/default.js');

[Kotiara]

Код:

$doc= JFactory::getDocument();
$doc->addScript($templateUrl.'/javascript/script.js', 'text/javascript',true);

[Sla]

Вот это пробуй
JHTML::_('behavior.mootools');

[Kotiara]

Я нашел корень всего! и вы были правы это действительно моя невнимательность.
При добавлении скриптов методом
$doc->addScript($templateUrl.'/javascript/script.js', 'text/javascript',true);
в выходном хтмл файле выходит вот что
<script src="http://sotalia2.com.ua/templates/sotralia_main/javascript/script.js" type="text/javascript" defer="defer"></script>
особо важно здесь свойство  defer="defer" которое говорит что скрипт будет исполнятся только после полной загрузки документа, а если подгрузить его же тким методом
JHTML::_('script',  $templateUrl.'/javascript/script.js',true);
то результат такой
<script src="http://sotalia2.com.ua/templates/sotralia_main/javascript/script.js" type="text/javascript" ></script>
И при этом мутулсы грузятся  так же как и скрипт который вызвал их загрузку, это определяется последним аргументом true значит нужно грузить мутулсы перед скриптом false значит не надо.
Соответственно если мутулсы грузятся с параметром defer="defer" то отрабатывают они уже после полной загрузки документа, и после отработки всех скирптов которые грузятся без этого параметра, а так же после скриптов прописаных прямо на странице.