fix: scrollToView not working properly if images exist

Closes: #351

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)
 

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

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
+  }
+})()

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'