feat: add preload image attributes to image instance

.gitignore

@@ -5,3 +5,4 @@ lib
 npm-debug.log
 package-lock.json
 .idea
+.history

src/lazy-image.js

@@ -83,7 +83,7 @@ const LazyImage = (lazyManager) => {
           return
         }
         const src = this.options.src
-        loadImageAsync({ src }, ({ src }) => {
+        loadImageAsync({ src, el: this.$el }, ({ src }) => {
           this.renderSrc = src
           this.state.loaded = true
         }, e => {

src/listener.js

@@ -124,7 +124,8 @@ export default class ReactiveListener {
     this.state.loading = true
     loadImageAsync({
       src: this.loading,
-      cors: this.cors
+      cors: this.cors,
+      el: this.el
     }, data => {
       this.render('loading', false)
       this.state.loading = false
@@ -163,7 +164,8 @@ export default class ReactiveListener {
 
       loadImageAsync({
         src: this.src,
-        cors: this.cors
+        cors: this.cors,
+        el: this.el
       }, data => {
         this.naturalHeight = data.naturalHeight
         this.naturalWidth = data.naturalWidth

src/util.js

@@ -218,12 +218,18 @@ const _ = {
 }
 
 const loadImageAsync = (item, resolve, reject) => {
+  const attributes = item.el.attributes
   let image = new Image()
   if (!item || !item.src) {
     const err = new Error('image src is required')
     return reject(err)
   }
-
+  // 将图片预配置的attributes赋值给image实例
+  for (let i = 0; i < attributes.length; i++) {
+    if (!['id', 'class', 'src'].includes(attributes[i].name)) {
+      image.setAttribute(attributes[i].name, attributes[i].value)
+    }
+  }
   image.src = item.src
   if (item.cors) {
     image.crossOrigin = item.cors