Merge pull request #3 from tolking/dev

fix dataset is undefined on IE

Author: tolking

.npmignore

@@ -8,7 +8,8 @@
 node_modules/
 test/
 docs/
-examples/
+example/
+src/
 
 npm-debug.log
 yarn-error.log

README.md

@@ -30,7 +30,7 @@ import LazyLoading from 'vue-lazy-loading'
 Vue.use(LazyLoading)
 ```
 
-``` vue
+``` html
 <template>
   <!-- Setting a fixed size is better for browser loading -->
   <!-- Replace `src` with `v-lazy` -->
@@ -103,7 +103,3 @@ import LazyLoading from 'vue-lazy-loading'
 ## License
 
 [MIT](http://opensource.org/licenses/MIT)
-
-## Keywords
-
-vue lazy img iframe loading background-image

package.json

@@ -1,11 +1,13 @@
 {
   "name": "vue-lazy-loading",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "a vue plugin to better supporting lazy loading for image and iframe",
   "main": "dist/index.js",
-  "typings": "dist/index.d.ts",
+  "type": "module",
+  "types": "dist/index.d.ts",
   "scripts": {
-    "dev": "tsc -w"
+    "dev": "tsc -w",
+    "build": "tsc -b"
   },
   "repository": {
     "type": "git",

src/util.ts

@@ -92,18 +92,17 @@ export class LazyCore {
     this.io = new IntersectionObserver(entries => {
       entries.forEach(item => {
         if (item.isIntersecting) {
-          const src = (item.target as LazyElement).dataset?.src
-          const srcset = (item.target as LazyElement).dataset?.srcset
-          const bg = (item.target as LazyElement).dataset?.bg
+          const el = (item.target as LazyElement)
+          const { src, srcset, bg } = getDataset(el)
 
           if (src) {
-            (item.target as LazyElement).src = src
+            el.src = src
           }
           if (srcset) {
-            (item.target as LazyElement).srcset = srcset
+            el.srcset = srcset
           }
           if (bg) {
-            (item.target as LazyElement).style.backgroundImage = `url(${bg})`
+            el.style.backgroundImage = `url(${bg})`
           }
           this.io?.unobserve(item.target)
         }
@@ -114,6 +113,28 @@ export class LazyCore {
   }
 }
 
+function getDataset(el: LazyElement) {
+  if (el.dataset) {
+    return el.dataset
+  } else {
+    const obj = {} as LazyElement['dataset']
+
+    for (let i = 0; i < el.attributes.length; i++) {
+      const name = el.attributes[i].nodeName
+
+      if (/^data-\w+$/.test(name)) {
+        const key = name.split('-')[1]
+        const value = el.attributes[i].nodeValue || undefined
+
+        if (['src', 'srcset', 'bg'].indexOf(key) !== -1) {
+          obj[key as 'src' | 'srcset' | 'bg'] = value
+        }
+      }
+    }
+    return obj
+  }
+}
+
 export function getVueVersion(Vue: any) {
   return Number(Vue.version.split('.')[0])
 }