Большая нагрузка на браузер при вкл jquery?

Question

[Barmunk]

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



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

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

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



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

Answer 1

[Mithgol]

Похоже, что в Вашем коде при каждом наведении (hover) загружается «Cloud Zoom» из Сети (getscript), что само по себе способно создать колоссальную нагрузку:

$(document).ready(function(){
   $('#zoom1').hover(function(){
      $.getscript('js/cloud-zoom.1.0.2.min.js', function(){
         testAjax();
      });
   });
});

Уместно, по меньшей мере, переставить местами обработчики событий, чтобы сперва один раз загружался скрипт «Cloud Zoom», а затем (когда он пришёл) назначался обработчик наведения мыши на иллюстрацию (если $('#zoom1') является именно иллюстрацией):

$(function(){
   $.getscript('js/cloud-zoom.1.0.2.min.js', function(){
      $('#zoom1').hover(function(){
         testAjax();
      });
   });
});

В скрипте «Cloud Zoom», судя по его коду, не предусмотрен собственный механизм для приостановки эффекта лупы. Вы, если искали такой механизм, можете попробовать отодрать обработчики событий от иллюстраций и галерей:

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

После этого можно попробовать перезапускать эффект лупы тем способом, который в самóм плагине «Cloud Zoom» используется в самом начале кода:

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

Естественно, идеальная работа не гарантируется: это просто напрашивающийся «грязный трюк» («dirty hack»).

Сразу скажу ещё, что «грязный трюк», может быть, и не нужен ещё: если достаточно того, чтобы плагин «Cloud Zoom» не начинал автоматически набрасываться на все имеющиеся картинки и галереи на странице (то есть скачивать чёртову уйму крупных иллюстраций), а начинал бы действовать только при наведении мыши на картинку, то хватит всего двух шагов.

Во-первых, отредактируйте используемый код «Cloud Zoom», убрав оттуда автозапуск. В коде джаваскрипт автозапуска идёт в одну строку, но я для красоты напишу его в структурированном виде:

$(document).ready(function () {
    $('.cloud-zoom, .cloud-zoom-gallery').CloudZoom()
});

Во-вторых, вместо убранного автозапуска следует вручную написать запуск, срабатывающий при наведении мыши на иллюстрацию или галерею:

$('.cloud-zoom, .cloud-zoom-gallery').hover(function(){
   $(this).CloudZoom();
});

Если же окажется, что многократный запуск CloudZoom(), случающийся после каждого наведения мыши, создаёт неприятные эффекты, то можно пометить иллюстрации и галереи некоторой пометкою, и снимать её после запуска CloudZoom():

$('.cloud-zoom, .cloud-zoom-gallery').addClass('CloudZoomNotRunning').hover(function(){
   var $this = $(this);
   if ($this.is('.CloudZoomNotRunning')){
      $this.CloudZoom().removeClass('CloudZoomNotRunning');
   };
});

Естественно, весь такой код, на .CloudZoom() основанный, следует запускать только после того, как код плагина «Cloud Zoom» ужé загружен getscript().

Точно такую же цепочку .addClass(…).hover(…), несомненно, придётся по разу с нуля применять и на каждую такую новую иллюстрацию или галерею, которая добавлена на страницу AJAXом.

Comments

[Barmunk]

Большое спасибо за развернутый ответ! Яб сам не справился

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

<script type=\'text/javascript\'>
$(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();
});

и все заработало как и хотелось! Еще раз большое спасибо!

Answer 2

[resurection]

А зачем на hover вешать загрузку всего скрипта?
1. В любом случае скрипт должен грузится только 1 раз на страницу.
2. После построения (и ещё раз после перестроения) списка картинок на аяксе должна быть ещё раз вызвана ф-ция иницииализации. Для этого нужно посмотреть в исходники. Если не ошибаюсь, то вот эта:
$('.cloud-zoom, .cloud-zoom-gallery').CloudZoom();

Answer 3

[Павел Некрасов]

Не понимаю причем тут аякс и лупа, ну пусть каталог загружается аяксом, по факту загрузки (onload callback) делайте $(каталог).CloudZoom(); и так каждый раз. А зачем при наведении грузить плагин я так и не понял.

Answer 4

[Barmunk]

без getscript он вообще не запускается, так как шапка с аякс каталогом вообще не взаимодействует.
Основная проблема в том что скрипт запускается при наведении мыши на все изображения сразу…
Из-за этого очень сильно начинает тормозить браузер. А хотелось бы чтоб при наведении запускалась
только одна конкретная картинка, и так с каждым изображением…