diff --git a/package.json b/package.json
index a145b294270e2a829a2cd86353392ce4e75f65a7..da64e5c5f081717f3b973647b80ca8d378187dba 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
     "deepmerge": "^3.1.0",
     "i18next": "^14.0.1",
     "intersection-observer": "^0.5.1",
+    "lodash": "^4.17.11",
     "manifesto.js": "^3.0.9",
     "node-fetch": "^2.3.0",
     "node-sass": "^4.9.2",
diff --git a/src/components/OpenSeadragonViewer.js b/src/components/OpenSeadragonViewer.js
index 88b87a08563ad1b027daf1b817766aab925a7539..1dc327da747704b44eb1d6d9ac2d7ff86a23c80f 100644
--- a/src/components/OpenSeadragonViewer.js
+++ b/src/components/OpenSeadragonViewer.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import OpenSeadragon from 'openseadragon';
+import debounce from 'lodash/debounce';
 import ns from '../config/css-ns';
 import ZoomControls from '../containers/ZoomControls';
 
@@ -36,7 +37,8 @@ class OpenSeadragonViewer extends Component {
       showNavigationControl: false,
       preserveImageSizeOnResize: true,
     });
-    this.viewer.addHandler('viewport-change', this.onViewportChange);
+    console.log(this.viewer);
+    this.viewer.addHandler('viewport-change', debounce(this.onViewportChange, 300));
 
     if (viewer) {
       this.viewer.viewport.panTo(viewer, false);