image-loader-spinner - npm Package Compare versions

Comparing version 1.0.7 to 1.0.8

dist/index.js

@@ -32,4 +32,10 @@ "use strict";
     const mutation = mutations[i];
-    if (mutation.target != null && mutation.target instanceof Image) {
-      if (mutation.attributeName == "src" && mutation.target.src == imageErrorSrc)
+    let countAddedImage = 0;
+    for (let i2 in mutation.addedNodes) {
+      const el = mutation.addedNodes[i2];
+      if (el instanceof Image)
+        countAddedImage++;
+    }
+    if (mutation.target != null && mutation.target instanceof Image || countAddedImage > 0) {
+      if (mutation.attributeName == "src" && mutation.target instanceof Image && mutation.target.src == imageErrorSrc)
         return;
@@ -74,8 +80,12 @@ checkImages();
       size = parseInt(spinnerSize);
+    const spinner_container = document.createElement("div");
+    spinner_container.style.width = size + "px";
+    spinner_container.style.height = size + "px";
     const spinner = document.createElement("div");
     spinner.classList.add("spinner");
-    spinner.style.width = size + "px";
-    spinner.style.height = size + "px";
-    image.spinner = spinner;
-    parentElement.insertBefore(spinner, image);
+    spinner.style.width = size / 2 + "px";
+    spinner.style.height = size / 2 + "px";
+    spinner_container.appendChild(spinner);
+    image.spinner = spinner_container;
+    parentElement.insertBefore(spinner_container, image);
     image.addEventListener("load", imageLoaded);
@@ -99,2 +109,3 @@ image.addEventListener("error", imageError);
   observer.observe(document, {
+    childList: true,
     subtree: true,
@@ -101,0 +112,0 @@ attributes: true

package.json

 {
   "name": "image-loader-spinner",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "Use a spinner until your images are completely loaded in the DOM",
@@ -5,0 +5,0 @@ "main": "./dist/index.js",

README.md

@@ -10,2 +10,5 @@
 
+### Example output
+![image](https://i.imgur.com/l9kSkEO.gif)
+
 ### Usage
@@ -27,11 +30,18 @@ ```javascript
         <style>
-            .spinner {
-                border: 3px solid #333;
-                border-bottom-color: transparent;
-                border-radius: 50%;
-                display: inline-block;
-                box-sizing: border-box;
-                animation: rotation 1s linear infinite;
-            }
+            .spinner_container {
+			    display: flex;
+			    align-items: center;
+			    background-color: rgba(0, 0, 0, 0.05);
 
+                .spinner {
+                    border: 3px solid #333;
+                    border-bottom-color: transparent;
+                    border-radius: 50%;
+                    display: inline-block;
+                    box-sizing: border-box;
+                    animation: rotation 1s linear infinite;
+                    margin: auto
+                }
+		    }
+
             @keyframes rotation {
@@ -48,3 +58,3 @@ 0% {
 
-        <img src="assets/images/image.png" spinner="50" /> <!-- Spinner size 50px -->
+        <img src="assets/images/image.png" spinner="100" /> <!-- Spinner size 50px -->
 
@@ -59,3 +69,4 @@ <div class="insideDiv">
 Add the attribute spinner for set the loading spinner instead an empty image.<br />
-The attribute is the size of your spinner div.<br />
+The attribute is the size of your spinner_container div.<br />
+The spinner will be half the size of your container.<br />
 The module detect the DOM inserted images and updated images, and actualise spinners while loading.
@@ -69,3 +80,3 @@
 const image = new Image();
-image.setAttribute("spinner", "50");
+image.setAttribute("spinner", "100");
 setTimeout(() => {
@@ -84,5 +95,5 @@ image.src = "https://i.imgur.com/rsjPao4.gif";
     const image = document.getElementById("myImage");
-    image.setAttribute("spinner", "50");
+    image.setAttribute("spinner", "100");
 	image.src = "https://i.imgur.com/rsjPao4.gif";
 }, 5000)
 ```

No alert changes

Improved metrics

Total package byte prevSize

23124

15.41%

Lines of code

208

11.83%

Number of lines in readme file

93

13.41%

No dependency changes