From 3d0bfd6c39b8bc538e0e9a550b2133f20f7e9e9f Mon Sep 17 00:00:00 2001
From: Kang Cheng <kcheng@utilitywarehouse.co.uk>
Date: Sun, 23 Dec 2018 09:52:39 -0800
Subject: [PATCH 1/2] fix: scrollToView not working properly if images exist

Closes: https://github.com/docsifyjs/docsify/issues/351
---
 src/core/event/scroll.js    | 24 ++++++++++++++
 src/core/render/compiler.js |  4 ++-
 src/core/util/image.js      | 62 +++++++++++++++++++++++++++++++++++++
 src/core/util/index.js      |  1 +
 4 files changed, 90 insertions(+), 1 deletion(-)
 create mode 100644 src/core/util/image.js

diff --git a/src/core/event/scroll.js b/src/core/event/scroll.js
index 762d949..93c4f61 100644
--- a/src/core/event/scroll.js
+++ b/src/core/event/scroll.js
@@ -1,5 +1,6 @@
 import {isMobile} from '../util/env'
 import * as dom from '../util/dom'
+import image from '../util/image'
 import Tweezer from 'tweezer.js'
 
 const nav = {}
@@ -123,11 +124,34 @@ export function scrollActiveSidebar(router) {
   })
 }
 
+export let pausedScrollToView
+
+export function proceedScrollToView() {
+  if (pausedScrollToView) {
+    const copy = pausedScrollToView.slice()
+    pausedScrollToView = undefined
+    scrollIntoView(...copy)
+  }
+
+  image.unsubscribe(proceedScrollToView)
+}
+
 export function scrollIntoView(path, id) {
   if (!id) {
     return
   }
 
+  if (pausedScrollToView) {
+    pausedScrollToView = [path, id]
+    return
+  }
+
+  if (!image.isAllImagesComplete()) {
+    pausedScrollToView = [path, id]
+    image.subscribe(proceedScrollToView)
+    return
+  }
+
   const section = dom.find('#' + id)
   section && scrollTo(section)
 
diff --git a/src/core/render/compiler.js b/src/core/render/compiler.js
index 9d6536d..1267fd1 100644
--- a/src/core/render/compiler.js
+++ b/src/core/render/compiler.js
@@ -299,7 +299,9 @@ export class Compiler {
         url = getPath(contentBase, getParentPath(router.getCurrentPath()), href)
       }
 
-      return `<img src="${url}"data-origin="${href}" alt="${text}"${attrs}>`
+      window.Docsify.util.image.increaseLoadingImageCount()
+
+      return `<img src="${url}" data-origin="${href}" alt="${text}" onload="javascript:Docsify.util.image.onLoad(this)" onerror="javascript:Docsify.util.image.onError(this)"${attrs}>`
     }
 
     renderer.origin = origin
diff --git a/src/core/util/image.js b/src/core/util/image.js
new file mode 100644
index 0000000..47aaff1
--- /dev/null
+++ b/src/core/util/image.js
@@ -0,0 +1,62 @@
+export default (function () {
+  let loadingImageCount = 0
+  const subscribers = []
+
+  function subscribe(cb) {
+    subscribers.push(cb)
+  }
+
+  function unsubscribe(cb) {
+    const index = subscribers.indexOf(cb)
+
+    if (index !== -1) {
+      subscribers.splice(index, 1)
+    }
+  }
+
+  function notifyAllImagesComplete() {
+    for (let i = 0; i < subscribers.length; i++) {
+      subscribers[i]()
+    }
+  }
+
+  function increaseLoadingImageCount() {
+    loadingImageCount += 1
+  }
+
+  function decreaseLoadingImageCount() {
+    loadingImageCount -= 1
+
+    if (loadingImageCount === 0) {
+      notifyAllImagesComplete()
+    }
+  }
+
+  function cleanElement(ele) {
+    ele.removeAttribute('onload')
+    ele.removeAttribute('onerror')
+  }
+
+  function onLoad(ele) {
+    cleanElement(ele)
+    decreaseLoadingImageCount()
+  }
+
+  function onError(ele) {
+    cleanElement(ele)
+    decreaseLoadingImageCount()
+  }
+
+  function isAllImagesComplete() {
+    return loadingImageCount === 0
+  }
+
+  return {
+    subscribe,
+    unsubscribe,
+    increaseLoadingImageCount,
+    onLoad,
+    onError,
+    isAllImagesComplete
+  }
+})()
diff --git a/src/core/util/index.js b/src/core/util/index.js
index eba6598..baf1c6b 100644
--- a/src/core/util/index.js
+++ b/src/core/util/index.js
@@ -1,3 +1,4 @@
 export * from './core'
 export * from './env'
 export * from '../router/util'
+export {default as image} from './image'

From 0586fe7174f0303374a426dd7b7ce639ae7019cd Mon Sep 17 00:00:00 2001
From: Kang Cheng <kcheng@utilitywarehouse.co.uk>
Date: Sun, 23 Dec 2018 10:00:12 -0800
Subject: [PATCH 2/2] chore: use imported util fn

---
 src/core/render/compiler.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/core/render/compiler.js b/src/core/render/compiler.js
index 1267fd1..967d16e 100644
--- a/src/core/render/compiler.js
+++ b/src/core/render/compiler.js
@@ -6,6 +6,7 @@ import {slugify} from './slugify'
 import {emojify} from './emojify'
 import {isAbsolutePath, getPath, getParentPath} from '../router/util'
 import {isFn, merge, cached, isPrimitive} from '../util/core'
+import image from '../util/image'
 
 // See https://github.com/PrismJS/prism/pull/1367
 import 'prismjs/components/prism-markup-templating'
@@ -299,7 +300,7 @@ export class Compiler {
         url = getPath(contentBase, getParentPath(router.getCurrentPath()), href)
       }
 
-      window.Docsify.util.image.increaseLoadingImageCount()
+      image.increaseLoadingImageCount()
 
       return `<img src="${url}" data-origin="${href}" alt="${text}" onload="javascript:Docsify.util.image.onLoad(this)" onerror="javascript:Docsify.util.image.onError(this)"${attrs}>`
     }