Cache offset and dimensions for better performance (thanks beaulm)

thdoan · Apr 20, 2016 · 1aab082 · 1aab082
1 parent 20274c4
commit 1aab082
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 14 deletions.
diff --git a/bower.json b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "magnify",
   "description": "A simple, lightweight jQuery magnifying glass zoom plugin.",
-  "version": "1.6.5",
+  "version": "1.6.6",
   "main": [
     "dist/css/magnify.css",
     "dist/js/jquery.magnify.js"

diff --git a/dist/js/jquery.magnify.js b/dist/js/jquery.magnify.js
@@ -1,5 +1,5 @@
 /*!
- * jQuery Magnify Plugin v1.6.5 by Tom Doan (http://thdoan.github.io/magnify/)
+ * jQuery Magnify Plugin v1.6.6 by Tom Doan (http://thdoan.github.io/magnify/)
  * Based on http://thecodeplayer.com/walkthrough/magnifying-glass-for-images-using-jquery-and-css3
  *
  * jQuery Magnify by Tom Doan is licensed under the MIT License.
@@ -22,6 +22,13 @@
           $anchor = $image.closest('a'),
           $container,
           $lens,
+          oContainerOffset,
+          nContainerWidth,
+          nContainerHeight,
+          nImageWidth,
+          nImageHeight,
+          nLensWidth,
+          nLensHeight,
           nMagnifiedWidth = 0,
           nMagnifiedHeight = 0,
           sImgSrc = $image.attr('data-magnify-src') || oSettings.src || $anchor.attr('href') || '',
@@ -66,6 +73,14 @@
             // before the image is fully loaded.
             nMagnifiedWidth = elImage.width;
             nMagnifiedHeight = elImage.height;
+            // Cache offset and dimensions for improved performance
+            oContainerOffset = $container.offset();
+            nContainerWidth = $container.width();
+            nContainerHeight = $container.height();
+            nImageWidth = $image.width();
+            nImageHeight = $image.height();
+            nLensWidth = $lens.width();
+            nLensHeight = $lens.height();
             // Store dimensions for mobile plugin
             $image.data('zoomSize', {
               width: nMagnifiedWidth,
@@ -81,15 +96,15 @@
               e.preventDefault();
               // x/y coordinates of the mouse pointer or touch point
               // This is the position of .magnify relative to the document.
-              var oMagnifyOffset = $container.offset(),
-                /* We deduct the positions of .magnify from the mouse or touch
-                   positions relative to the document to get the mouse or touch
-                   positions relative to the container (.magnify). */
-                nX = (e.pageX || e.originalEvent.touches[0].pageX) - oMagnifyOffset.left,
-                nY = (e.pageY || e.originalEvent.touches[0].pageY) - oMagnifyOffset.top;
+              //
+              // We deduct the positions of .magnify from the mouse or touch
+              // positions relative to the document to get the mouse or touch
+              // positions relative to the container (.magnify).
+              var nX = (e.pageX || e.originalEvent.touches[0].pageX) - oContainerOffset.left,
+                nY = (e.pageY || e.originalEvent.touches[0].pageY) - oContainerOffset.top;
               // Toggle magnifying lens
               if (!$lens.is(':animated')) {
-                if (nX<$container.width() && nY<$container.height() && nX>0 && nY>0) {
+                if (nX<nContainerWidth && nY<nContainerHeight && nX>0 && nY>0) {
                   if ($lens.is(':hidden')) {
                     $('html').addClass('magnifying'); // Hide overflow while zooming
                     $lens.fadeIn(oSettings.speed);
@@ -100,16 +115,16 @@
               }
               if ($lens.is(':visible')) {
                 // Move the magnifying lens with the mouse
-                var nPosX = nX - $lens.width()/2,
-                  nPosY = nY - $lens.height()/2;
+                var nPosX = nX - nLensWidth/2,
+                  nPosY = nY - nLensHeight/2;
                 if (nMagnifiedWidth && nMagnifiedHeight) {
                   // Change the background position of .magnify-lens according
                   // to the position of the mouse over the .magnify-image image.
                   // This allows us to get the ratio of the pixel under the
                   // mouse pointer with respect to the image and use that to
                   // position the large image inside the magnifying lens.
-                  var nRatioX = Math.round(nX/$image.width()*nMagnifiedWidth - $lens.width()/2)*-1,
-                    nRatioY = Math.round(nY/$image.height()*nMagnifiedHeight - $lens.height()/2)*-1,
+                  var nRatioX = Math.round(nX/nImageWidth*nMagnifiedWidth - nLensWidth/2)*-1,
+                    nRatioY = Math.round(nY/nImageHeight*nMagnifiedHeight - nLensHeight/2)*-1,
                     sBgPos = nRatioX + 'px ' + nRatioY + 'px';
                 }
                 // Now the lens moves with the mouse. The logic is to deduct

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "magnify",
-  "version": "1.6.5",
+  "version": "1.6.6",
   "description": "A simple, lightweight jQuery magnifying glass zoom plugin.",
   "keywords": [
     "jquery-plugin",