Big load on the browser when jquery is enabled?

Question

JavaScript

Good afternoon. Please tell me how to solve this problem. Installed a magnifying glass plugin for images on the site. Everything connects and works, but since this is an online store, there can be up to 20 pictures on one page, and when the mouse is hovered over one of the images, the function for the entire page is launched. How can it be limited to only one picture? Pointed - the picture loaded - the function was connected - the mouse was removed - it turned off and so on in a circle ...

here is the function I could register to enable the library:

&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;

magnifier link: www.professorcloud.com/mainsite/cloud-zoom.htm

Simply connecting a magnifying glass to the header as it is written in the example will not work, because the catalog output on the site is made entirely on Ajax.

Answer 1

It looks like your code is loading "Cloud Zoom" from the Web (getscript) on every hover , which in itself can create a huge load:

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

It is appropriate to at least rearrange the event handlers so that the "Cloud Zoom" script is loaded once first, and then (when it arrives) a mouseover handler is assigned to the illustration (if $('#zoom1') is exactly the illustration):

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

The "Cloud Zoom" script, judging by its code, does not provide its own mechanism for pausing the magnifying glass effect. You, if you were looking for such a mechanism, you can try to tear off event handlers from illustrations and galleries:

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

After that, you can try to restart the magnifying glass effect in the way that the Cloud Zoom plugin itself uses at the very beginning of the code:

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

Of course, perfect work is not guaranteed: it's just a "dirty hack" that suggests itself.
I’ll also say right away that the “dirty trick” may not be needed yet: if it ’s enough that the Cloud Zoom plugin does not automatically start attacking all the available pictures and galleries on the page (that is, downloading a damn lot of large illustrations), and would start to act only when you hover the mouse over the picture, then only two steps are enough.
First, edit the "Cloud Zoom" code you 're using to remove autoplay from there. In the code, the autorun javascript goes in one line, but for beauty I will write it in a  structured form:

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

Secondly, instead of the removed autoplay, you should manually write a launch that fires when you hover the mouse over an illustration or gallery:

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

If it turns out that running CloudZoom() multiple times after each mouse hover creates unpleasant effects, then you can mark illustrations and galleries with some mark, and remove it after running CloudZoom():

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

Naturally, all such .CloudZoom() based code should only be run after the "Cloud Zoom" plugin code has already been loaded by getscript().
The exact same .addClass(…).hover(…) chain will undoubtedly have to be applied once from scratch for each such new illustration or gallery that is added to the page by AJAX.

Answer 2

And why hang up on hover the download of the entire script?
1. In any case, the script should only be loaded once per page.
2. After building (and again after rebuilding) the list of images on Ajax, the initialization function must be called again. To do this, you need to look at the source. If I'm not mistaken, then this one:
$('.cloud-zoom, .cloud-zoom-gallery').CloudZoom();

Answer 3

I don’t understand where Ajax and the magnifying glass have to do with it, well, let the directory be loaded by Ajax, upon loading (onload callback) do $(catalog).CloudZoom(); and so every time. And why, when hovering, load the plugin, I did not understand.

Answer 4

without getscript, it doesn't start at all, since the header doesn't interact with the ajax directory at all.
The main problem is that the script is launched when you hover the mouse over all the images at once ...
Because of this, the browser starts to slow down very much. And I would like
only one specific image to be launched on hover, and so with each image ...