feat: suppert loading="eager"

Author: tolking

README.md

@@ -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>
@@ -77,7 +82,7 @@ rootMargin for IntersectionObserver
 
 ## 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')

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 {