Merge pull request #2 from tolking/dev

- suppert loading="eager"
- change README

Author: tolking

README.md

@@ -1,6 +1,6 @@
 # vue-lazy-loading
 
-> *alpha* a vue plugin to better supporting lazy loading for image and iframe
+> a vue plugin to better supporting lazy loading for image and iframe
 
 **The plugin will preferentially use native image and iframe [lazy-loading](https://caniuse.com/#feat=loading-lazy-attr), if the browser does not support it, it will be implemented through [IntersectionObserver](https://caniuse.com/#feat=intersectionobserver)**
 
@@ -30,21 +30,26 @@ import LazyLoading from 'vue-lazy-loading'
 Vue.use(LazyLoading)
 ```
 
-- **Setting a fixed size is better for browser loading**
-
 ``` vue
 <template>
+  <!-- Setting a fixed size is better for browser loading -->
+  <!-- Replace `src` with `v-lazy` -->
   <img v-lazy="'img.jpg'" width="536" height="354" />
 
+  <!-- Set `loading="lazy"` is not required -->
+  <iframe v-lazy="'iframe.html'" loading="lazy" width="1000" height="500" />
+
+  <!-- Load right away with set `loading="eager"` -->
+  <iframe v-lazy="'iframe.html'" loading="eager" width="1000" height="500" />
+
+  <!-- Pass in the Relative URLs like this -->
   <img v-lazy="logo" width="100" height="100" />
 
-  <iframe v-lazy="'iframe.html'" width="1000" height="500" />
+  <!-- Replace `srcset` with `v-lazy:set` or `v-lazy:srcset` -->
+  <img v-lazy="'img.jpg'" v-lazy:set="'img.jpg 1000w, img-2x.jpg 2000w'" width="536" height="354" />
 
+  <!-- Replace `style.backgroundImage` with `v-lazy:bg` or `v-lazy:background` -->
   <div v-lazy:bg="logo">background</div>
-  <!--or v-lazy:background="logo"-->
-  
-  <img v-lazy="'img.jpg'" v-lazy:set="'img.jpg 1000w, img-2x.jpg 2000w'" width="536" height="354" />
-  <!--or v-lazy:srcset="URL"-->
 </template>
 
 <script>
@@ -75,9 +80,20 @@ Use the native image lazy-loading for the web
 
 rootMargin for IntersectionObserver
 
+## Load animation
+
+Loading animation is not included by default. You can use it this way
+
+``` css
+img,
+iframe {
+  background: rgba(50, 50, 50, 0.3) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="white"><path opacity=".25" d="M16 0 A16 16 0 0 0 16 32 A16 16 0 0 0 16 0 M16 4 A12 12 0 0 1 16 28 A12 12 0 0 1 16 4"/><path d="M16 0 A16 16 0 0 1 32 16 L28 16 A12 12 0 0 0 16 4z"><animateTransform attributeName="transform" type="rotate" from="0 16 16" to="360 16 16" dur="0.8s" repeatCount="indefinite" /></path></svg>') center no-repeat;
+}
+```
+
 ## Browser Support
 
-Available in [latest browsers](http://caniuse.com/#feat=intersectionobserver). If browser support is not available, then make use of this [polyfill](https://www.npmjs.com/package/intersection-observer).
+Available in [latest browsers](http://caniuse.com/#feat=intersectionobserver). If browser support is not available (eg IE), then make use of this [polyfill](https://www.npmjs.com/package/intersection-observer).
 
 ``` js
 require('intersection-observer')

package.json

@@ -25,6 +25,7 @@
   },
   "homepage": "https://github.com/tolking/vue-lazy-loading#readme",
   "devDependencies": {
+    "@types/node": "^14.0.14",
     "typescript": "^3.9.5"
   }
 }

src/util.ts

@@ -25,20 +25,25 @@ export class LazyCore {
   }
 
   bind(el: Element, binding: LazyBinding) {
-    !el.hasAttribute('loading') && el.setAttribute('loading', 'lazy')
+    binding.arg !== 'bg' &&
+      binding.arg !== 'background' &&
+      !el.hasAttribute('loading') &&
+      el.setAttribute('loading', 'lazy')
     this.update(el, binding)
   }
 
   update(el: Element, { oldValue, value, arg }: LazyBinding) {
     if (oldValue === value) return
+    const isEager = el.getAttribute('loading') === 'eager'
+
     if (arg) {
       switch (arg) {
         case 'bg':
         case 'background':
           if ((el as LazyElement).style.backgroundImage) {
             (el as LazyElement).style.backgroundImage = ''
           }
-          if (this.type === 'loading' || this.type === 'observer') {
+          if (!isEager && (this.type === 'loading' || this.type === 'observer')) {
             if (!this.io) {
               this.setObserver()
             }
@@ -53,22 +58,22 @@ export class LazyCore {
           el.hasAttribute('srcset') && el.removeAttribute('srcset')
           if (this.type === 'loading') {
             el.setAttribute('srcset', value)
-          } else if (this.type === 'observer') {
+          } else if (!isEager && this.type === 'observer') {
             el.setAttribute('data-srcset', value)
             this.io?.observe(el)
           } else {
             el.setAttribute('srcset', value)
           }
           break
         default:
-          error('One of [v-lazy="URL", v-lazy:bg="URL", v-lazy:background="URL", v-lazy:set="URL"]')
+          error('One of [v-lazy="URL", v-lazy:bg="URL", v-lazy:background="URL", v-lazy:set="URL", v-lazy：srcset="URL"]')
           break;
       }
     } else {
       el.hasAttribute('src') && el.removeAttribute('src')
       if (this.type === 'loading') {
         el.setAttribute('src', value)
-      } else if (this.type === 'observer') {
+      } else if (!isEager && this.type === 'observer') {
         el.setAttribute('data-src', value)
         this.io?.observe(el)
       } else {
@@ -77,7 +82,7 @@ export class LazyCore {
     }
   }
 
-  unbind(el: Element) { 
+  unbind(el: Element) {
     if (this.type === 'observer') {
       this.io?.unobserve(el)
     }