Большая нагрузка jquery

Barmunk · October 21, 2010

Добрый день. Подскажите пожалуйста как решить такую проблему. Установил на сайт плагин лупы для изображений. Все подключается и работает, но так как это интернет магазин на одной странице может находиться до 20 картинок и когда наводится мышка на одно из изображений запускается функция для всей страницы. Каким образом можно ее ограничить только одной картинкой? Навел - загрузилась картинка - подключилась функция - убрал мышку - отключилась и так по кругу...

вот какую функция я смог прописать для включения библиотеки:

<script type=\'text/javascript\'>
$(document).ready(function(){
$(\'#zoom1\').hover(function(){
$.getScript(\'js/cloud-zoom.1.0.2.min.js\', function(){
testAjax();
}); 
})
});
</script>

ссылка на лупу: http://www.professorcloud.com/mainsite/cloud-zoom.htm

З.Ы. Просто подключить лупу в хэдер как написано в примере не получится, потому что вывод каталога на сайте сделан целиком на аяксе.

Great Rash · October 22, 2010

А как у вас сейчас скрипт подключается?

Barmunk · October 22, 2010

для обычного контента не на аяксе, прописал в HEAD

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/JavaScript" src="/js/cloud-zoom.1.0.2.min.js"></script>

Далее взял файл отвечающий за работу аякс вывод каталога.

добавил class = 'cloud-zoom' id='zoom1'

в вывод изображений в пхп

if ($xquery->data["thumbnail"][$i])	$html .=	'<TD style="padding:0 10px;" WIDTH=1% VALIGN=TOP ALIGN=CENTER><CENTER><A HREF="i/w/'.$xquery->data["photo"][$i].'" TITLE="'.$xquery->data["brand"][$i].' - '.$xquery->data["ref"][$i].' '.$xquery->data["collection"][$i].'" class =\'cloud-zoom\' id=\'zoom1\'><IMG BORDER=0  SRC="/i/w_resized/'.$xquery->data["thumbnail"][$i].'" ALT="'.$xquery->data["brand"][$i].' - '.$xquery->data["ref"][$i].' '.$xquery->data["collection"][$i].'"></A>
<B>Ref:</B> '.$xquery->data["ref"][$i].'

';

И фактически, так как при запуске каталога включается аякс файл, то шапка не взаимодействует с ним. Поэтому пришлось делать запуск лупы непосредственно в файле вывода аякса, для всего скрипта

<script type=\'text/javascript\'>
$(document).ready(function(){
$(\'#zoom1\').hover(function(){
$.getScript(\'js/cloud-zoom.1.0.2.min.js\', function(){
testAjax();
});
})
});
</script>

Great Rash · October 22, 2010

Очень напрягает строка $.getScript, вы уверены что нужно грузить скрипт с сервера раз уж он у вас и так подключен в <head>?

Может проще после загрузки аяксом контента запускать функцию инициализации, а не грузить скрипт целиком?

P.S.

$('.cloud-zoom, .cloud-zoom-gallery').CloudZoom();

Barmunk · October 22, 2010

Без $.getScript отказывается запускаться вообще

Great Rash · October 22, 2010

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

Barmunk · October 22, 2010

http://www.timepiece.ru/ - каталог с лева - любой из брендов - кнопка "просмотр с описанием"

Great Rash · October 22, 2010

Перечитайте еще раз мое сообщение. Я просил вас собрать тестовую страницу, а не давать ссылку на полную. Разбираться в таком большом коде желания нет.

Barmunk · October 22, 2010

Получилось сделать таким образом:

$(document).ready(function(){

$.getscript(\'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js\', function(){

$.getscript(\'js/cloud-zoom.1.0.2.js\', function(){

$.getscript(\'styles/cloud-zoom.css\', function(){

$(\'#zoom1\').hover(function(){

testAjax();

})

});

</script>

и в js файле подправил:

$('.cloud-zoom, .cloud-zoom-gallery').hover(function(){

$(this).CloudZoom();

});

и все заработало как и хотелось

Sign In

Большая нагрузка jquery

Question

Barmunk

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

Great Rash

Link to comment

Share on other sites

Barmunk

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

Barmunk

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

Barmunk

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

Barmunk

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information