vue-lazy-loading - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

dist/util.d.ts

@@ -5,3 +5,3 @@ import { LazyOptions, LazyBinding } from '../types/index.js';
     private rootMargin;
-    private type;
+    private type?;
     private io?;
@@ -16,2 +16,3 @@ constructor(options: LazyOptions);
 export declare function getVueVersion(Vue: any): number;
+export declare function setStyle(el: Element, type: 'bg' | 'bgset', value: string): void;
 export declare function error(msg: string): void;

dist/util.js

 var LazyCore = (function () {
     function LazyCore(options) {
         var _a, _b;
-        this.type = 'loading';
         this.useNative = (_a = options === null || options === void 0 ? void 0 : options.useNative) !== null && _a !== void 0 ? _a : true;
         this.rootMargin = (_b = options === null || options === void 0 ? void 0 : options.rootMargin) !== null && _b !== void 0 ? _b : '200px';
-        this.init();
     }
@@ -23,4 +21,5 @@ LazyCore.prototype.init = function () {
     LazyCore.prototype.bind = function (el, binding) {
+        !this.type && this.init();
         binding.arg !== 'bg' &&
-            binding.arg !== 'background' &&
+            binding.arg !== 'bgset' &&
             !el.hasAttribute('loading') &&
@@ -31,3 +30,2 @@ el.setAttribute('loading', 'lazy');
     LazyCore.prototype.update = function (el, _a) {
-        var _b, _c, _d;
         var oldValue = _a.oldValue, value = _a.value, arg = _a.arg;
@@ -37,58 +35,51 @@ if (oldValue === value)
         var isEager = el.getAttribute('loading') === 'eager';
-        if (arg) {
-            switch (arg) {
-                case 'bg':
-                case 'background':
-                    if (el.style.backgroundImage) {
-                        el.style.backgroundImage = '';
-                    }
-                    if (!isEager && (this.type === 'loading' || this.type === 'observer')) {
-                        if (!this.io) {
-                            this.setObserver();
-                        }
-                        el.setAttribute('data-bg', value);
-                        (_b = this.io) === null || _b === void 0 ? void 0 : _b.observe(el);
-                    }
-                    else {
-                        el.style.backgroundImage = "url(" + value + ")";
-                    }
-                    break;
-                case 'set':
-                case 'srcset':
-                    el.hasAttribute('srcset') && el.removeAttribute('srcset');
-                    if (this.type === 'loading') {
-                        el.setAttribute('srcset', value);
-                    }
-                    else if (!isEager && this.type === 'observer') {
-                        el.setAttribute('data-srcset', value);
-                        (_c = this.io) === null || _c === void 0 ? void 0 : _c.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", v-lazy：srcset="URL"]');
-                    break;
-            }
+        switch (arg) {
+            case undefined:
+                el.hasAttribute('src') && el.removeAttribute('src');
+                if (!isEager && this.type === 'observer') {
+                    el.setAttribute('data-src', value);
+                    this.io.observe(el);
+                }
+                else {
+                    el.setAttribute('src', value);
+                }
+                break;
+            case 'set':
+            case 'srcset':
+                el.hasAttribute('srcset') && el.removeAttribute('srcset');
+                if (!isEager && this.type === 'observer') {
+                    el.setAttribute('data-srcset', value);
+                    this.io.observe(el);
+                }
+                else {
+                    el.setAttribute('srcset', value);
+                }
+                break;
+            case 'bg':
+                if (!isEager && (this.type === 'loading' || this.type === 'observer')) {
+                    !this.io && this.setObserver();
+                    el.setAttribute('data-bg', value);
+                    this.io.observe(el);
+                }
+                else {
+                    setStyle(el, 'bg', value);
+                }
+                break;
+            case 'bgset':
+                if (!isEager && (this.type === 'loading' || this.type === 'observer')) {
+                    !this.io && this.setObserver();
+                    el.setAttribute('data-bgset', value);
+                    this.io.observe(el);
+                }
+                else {
+                    setStyle(el, 'bgset', value);
+                }
+                break;
+            default:
+                error('One of v-lazy, v-lazy:set, v-lazy:srcset, v-lazy:bg, v-lazy:bgset');
+                break;
         }
-        else {
-            el.hasAttribute('src') && el.removeAttribute('src');
-            if (this.type === 'loading') {
-                el.setAttribute('src', value);
-            }
-            else if (!isEager && this.type === 'observer') {
-                el.setAttribute('data-src', value);
-                (_d = this.io) === null || _d === void 0 ? void 0 : _d.observe(el);
-            }
-            else {
-                el.setAttribute('src', value);
-            }
-        }
     };
     LazyCore.prototype.unbind = function (el) {
-        var _a;
-        if (this.type === 'observer') {
-            (_a = this.io) === null || _a === void 0 ? void 0 : _a.unobserve(el);
-        }
+        this.type === 'observer' && this.io.unobserve(el);
     };
@@ -99,16 +90,10 @@ LazyCore.prototype.setObserver = function () {
             entries.forEach(function (item) {
-                var _a;
                 if (item.isIntersecting) {
                     var el = item.target;
-                    var _b = getDataset(el), src = _b.src, srcset = _b.srcset, bg = _b.bg;
-                    if (src) {
-                        el.src = src;
-                    }
-                    if (srcset) {
-                        el.srcset = srcset;
-                    }
-                    if (bg) {
-                        el.style.backgroundImage = "url(" + bg + ")";
-                    }
-                    (_a = _this.io) === null || _a === void 0 ? void 0 : _a.unobserve(item.target);
+                    var _a = getDataset(el), src = _a.src, srcset = _a.srcset, bg = _a.bg, bgset = _a.bgset;
+                    bg && setStyle(el, 'bg', bg);
+                    bgset && setStyle(el, 'bgset', bgset);
+                    src && el.setAttribute('src', src);
+                    srcset && el.setAttribute('srcset', srcset);
+                    _this.io.unobserve(item.target);
                 }
@@ -134,3 +119,3 @@ });
                 var value = el.attributes[i].nodeValue || undefined;
-                if (['src', 'srcset', 'bg'].indexOf(key) !== -1) {
+                if (['src', 'srcset', 'bg', 'bgset'].indexOf(key) !== -1) {
                     obj[key] = value;
@@ -146,2 +131,10 @@ }
 }
+export function setStyle(el, type, value) {
+    var oldStyle = el.getAttribute('style') || '';
+    var style = type === 'bg'
+        ? "background-image: url(" + value + ");"
+        : "background-image: -webkit-image-set(" + value + "); background-image: image-set(" + value + ");";
+    var newStyle = oldStyle + style;
+    el.setAttribute('style', newStyle);
+}
 export function error(msg) {
@@ -148,0 +141,0 @@ process.env.NODE_ENV === 'development' &&

package.json

 {
   "name": "vue-lazy-loading",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "a vue plugin to better supporting lazy loading for image and iframe",
@@ -19,5 +19,6 @@ "main": "dist/index.js",
     "lazy",
+    "lazy-loading",
     "img",
     "iframe",
-    "loading"
+    "background-image"
   ],
@@ -24,0 +25,0 @@ "author": "tolking <[e-mail]>",

README.md

@@ -51,4 +51,7 @@ # vue-lazy-loading
 
-  <!-- Replace `style.backgroundImage` with `v-lazy:bg` or `v-lazy:background` -->
+  <!-- Replace `background-image` with `v-lazy:bg` -->
   <div v-lazy:bg="logo">background</div>
+
+  <!-- Replace `background-image: image-set` with `v-lazy:bgset` -->
+  <div v-lazy:bgset="'url(bg.img) 1x, url(bg-2x.img) 2x'">background</div>
 </template>
@@ -84,3 +87,3 @@
 
-## Load animation
+## Loading animation
 
@@ -87,0 +90,0 @@ Loading animation is not included by default. You can use it this way

types/index.d.ts

@@ -9,3 +9,3 @@ export type LazyOptions = undefined | {
   value: string
-  arg?: 'bg' | 'background' | 'set' | 'srcset'
+  arg?: 'set' | 'srcset' | 'bg' | 'bgset'
 }
@@ -20,3 +20,4 @@
     bg?: string
+    bgset?: string
   }
 }

No alert changes

Improved metrics

Total package byte prevSize

12063

increased by0.07%

Number of lines in readme file

109

increased by2.83%

Worsened metrics

Lines of code

203

decreased by-2.4%

No dependency changes