Update docs for image loading event hooks #75

docs/configuration.md

@@ -151,36 +151,81 @@ Events are associated with following actions: `open`, `grab`, `move`, `release`
 
 ### onBeforeOpen
 
+- Type: `Function`
+- Default: `function () {}`
+
 Occurs before opening the target.
 
 ### onOpen
 
+- Type: `Function`
+- Default: `function () {}`
+
 Occurs after the target is fully opened.
 
 ### onBeforeGrab
 
+- Type: `Function`
+- Default: `function () {}`
+
 Occurs before grabbing the target.
 
 ### onGrab
 
+- Type: `Function`
+- Default: `function () {}`
+
 Occurs after the target is fully grabbed.
 
 ### onMove
 
+- Type: `Function`
+- Default: `function () {}`
+
 Occurs after the target is fully moved.
 
-### onBeforeRealse
+### onBeforeRelease
+
+- Type: `Function`
+- Default: `function () {}`
 
 Occurs before releasing the target.
 
 ### onRelease
 
+- Type: `Function`
+- Default: `function () {}`
+
 Occurs after the target is fully released.
 
 ### onBeforeClose
 
+- Type: `Function`
+- Default: `function () {}`
+
 Occurs before closing the target.
 
 ### onClose
 
+- Type: `Function`
+- Default: `function () {}`
+
 Occurs after the target is fully closed.
+
+### onImageLoading
+
+- Type: `Function`
+- Default: `function () {}`
+
+Occurs when the target hi-res image starts loading. This step happens right after `onBeforeOpen`.
+
+!> Triggers only if hi-res image source is supplied and option `preloadImage` is set to `false`.
+
+### onImageLoaded
+
+- Type: `Function`
+- Default: `function () {}`
+
+Occurs when the target hi-res image has been loaded.
+
+!> Triggers only if hi-res image source is supplied and option `preloadImage` is set to `false`.

src/index.js

@@ -98,8 +98,8 @@ export default class Zooming {
       const { srcOriginal } = this.target
 
       if (srcOriginal != null) {
-        this.options.onLoading()
-        loadImage(this.target.srcOriginal, this.options.onLoaded)
+        this.options.onImageLoading(target)
+        loadImage(srcOriginal, this.options.onImageLoaded)
       }
     }
 

src/options.js

@@ -136,11 +136,11 @@ export default {
    * A callback function that will be called when the hi-res image is loading.
    * @type {Function}
    */
-  onLoading: noop,
+  onImageLoading: noop,
 
   /**
    * A callback function that will be called when the hi-res image is loaded.
    * @type {Function}
    */
-  onLoaded: noop
+  onImageLoaded: noop
 }