add eagerShowing option

README.md

@@ -96,6 +96,9 @@ new JuejinLazyload(Element || ElementList || selector, {
   // 是否自动监听 window 的 scroll 和 resize 事件
   reactive: true,
 
+  // true - 图片头部加载完成后立即显示 | false - 全图加载完成后才显示
+  eagerShowing: false,
+
   // 初始化及 addOrUpdateElement 时调用
   infoGetter: (Element) => ({
     url: String,   // 图片地址，用以设置 IMG 元素的 src 或其它元素的 background-image

package.json

@@ -1,6 +1,6 @@
 {
   "name": "juejin-lazyload",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "juejin lazyload",
   "main": "dist/juejin-lazyload.min.js",
   "scripts": {

src/juejin-lazyload.js

@@ -13,12 +13,14 @@ const DEFAULT_OPTIONS = {
   interval: 200,
   debounce: false,
   reactive: true,
+  eagerShowing: false,
   infoGetter: null,
   visibleAreaGetter: null,
   onStateChange: null
 }
 
 const INFO_PROP_NAME = '__JUEJIN_LAZYLOAD'
+const META_CHECK_INTERVAL = 300
 
 export default class JuejinLazyload {
 
@@ -81,18 +83,26 @@ export default class JuejinLazyload {
   }
 
   initElement (element) {
+    this.attachInfo(element)
+    this.setPlaceholder(element)
+    this.updateElementClassByState('inited', element)
+    this.invokeStateHook('inited', element)
+  }
+
+  attachInfo (element) {
     const imgInfo = this.options.infoGetter && this.options.infoGetter(element)
     const info = Object.assign({}, imgInfo, {
-      isImg: element.nodeName === 'IMG',
       loading: false
     })
-    info.hasPlaceholder = info.isImg && info.width && info.height
-    if (info.hasPlaceholder) {
+    element[INFO_PROP_NAME] = info
+  }
+
+  setPlaceholder (element) {
+    const info = element[INFO_PROP_NAME]
+    const isImg = element.nodeName === 'IMG'
+    if (isImg && info.width && info.height) {
       element.src = getPlaceholderDataUrl(info.width, info.height)
     }
-    element[INFO_PROP_NAME] = info
-    this.updateElementClassByState('inited', element)
-    this.invokeStateHook('inited', info.url, element)
   }
 
   removeInfo (element) {
@@ -142,23 +152,30 @@ export default class JuejinLazyload {
 
   loadIamge (element) {
     const info = element[INFO_PROP_NAME]
-    const { url, isImg } = info
+    const { url } = info
     info.loading = true
     this.updateElementClassByState('loading', element)
-    this.invokeStateHook('loading', url, element)
-    loadIamge(url, () => {
-      if (isImg) {
-        element.src = url
-      } else {
-        element.style.backgroundImage = `url(${url})`
+    this.invokeStateHook('loading', element)
+    loadIamge(url, {
+      onStart: (url, image) => {
+        if (this.options.eagerShowing) {
+          this.onMetaLoaded(image, () => {
+            element.removeAttribute('src')  // necessary
+            element.setAttribute('src', url)
+          })
+        }
+      },
+      onLoaded: () => {
+        this.setElementWithImageUrl(url, element)
+        this.updateElementClassByState('loaded', element)
+        this.invokeStateHook('loaded', element)
+        this.removeElement(element)
+      },
+      onError: () => {
+        this.updateElementClassByState('error', element)
+        this.invokeStateHook('error', element)
+        this.removeElement(element)
       }
-      this.removeElement(element)
-      this.updateElementClassByState('loaded', element)
-      this.invokeStateHook('loaded', url, element)
-    }, () => {
-      this.removeElement(element)
-      this.updateElementClassByState('error', element)
-      this.invokeStateHook('error', url, element)
     })
   }
 
@@ -186,12 +203,33 @@ export default class JuejinLazyload {
     }
   }
 
-  invokeStateHook (state, url, element) {
+  invokeStateHook (state, element) {
     if (this.options.onStateChange) {
+      const { url } = element[INFO_PROP_NAME]
       this.options.onStateChange(state, url, element, this)
     }
   }
 
+  setElementWithImageUrl (url, element) {
+    if (element.nodeName === 'IMG') {
+      element.src = url
+    } else {
+      element.style.backgroundImage = `url(${url})`
+    }
+  }
+
+  onMetaLoaded (image, callback) {
+    const token = setInterval(() => {
+      if (image.naturalWidth) {
+        stop()
+        callback()
+      }
+    }, META_CHECK_INTERVAL)
+    const stop = () => clearInterval(token)
+    on(image, 'load', stop)
+    on(image, 'error', stop)
+  }
+
   destroy () {
     this.removeEventListener()
     this.clean()

src/util.js

@@ -13,12 +13,12 @@ export function getViewportSize () {
   }
 }
 
-export function loadIamge (url, onLoaded, onError) {
-  if (!url) { return }
+export function loadIamge (url, { onStart, onLoaded, onError }) {
   const image = new Image()
-  image.onload = function () { onLoaded && onLoaded(url) }
-  image.onerror = function () { onError && onError(url) }
+  image.onload = function () { onLoaded && onLoaded(url, image) }
+  image.onerror = function () { onError && onError(url, image) }
   image.src = url
+  onStart && onStart(url, image)
 }
 
 export function throttle (fn, interval) {