Add folder structure; Change text on example images

Maingron · Oct 29, 2020 · d910cd1 · d910cd1
1 parent 9cd7cc2
commit d910cd1
Show file tree

Hide file tree

Showing 20 changed files with 99 additions and 1 deletion.
diff --git a/imageFormatFallback.js → build/imageFormatFallback.js b/imageFormatFallback.js → build/imageFormatFallback.js
diff --git a/build/imageFormatFallback.min.js b/build/imageFormatFallback.min.js
diff --git a/example.html → example/example.html b/example.html → example/example.html
@@ -3,7 +3,7 @@
     <head>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>Image Fallback Script</title>
-        <script src="imageFormatFallback.js"></script>
+        <script src="../build/imageFormatFallback.js"></script>
 
     </head>
     <body>

diff --git a/example/img/300.jpg b/example/img/300.jpg
diff --git a/example/img/300.jxr b/example/img/300.jxr
diff --git a/example/img/300.png b/example/img/300.png
diff --git a/example/img/300.webp b/example/img/300.webp
diff --git a/img/300.jpg b/img/300.jpg
diff --git a/img/300.jxr b/img/300.jxr
diff --git a/img/300.png b/img/300.png
diff --git a/img/300.webp b/img/300.webp
diff --git a/src/imageFormatFallback.js b/src/imageFormatFallback.js
@@ -0,0 +1,97 @@
+if(!data) {
+    var data = d = {};
+}
+
+if(!data["imageFormatFallback"]) {
+    var imageFormatFallback = data["imageFormatFallback"] = {
+        "elements":{},
+        "data":{},
+        "config":{}
+    }
+}
+
+if(!imageFormatFallback) {
+    var imageFormatFallback = data["imageFormatFallback"];
+}
+
+// config
+imageFormatFallback.config = {
+    "fallbackPrefix":"",
+    "fallbackAttributeName":"formats" //<img src="img/image.webp" formats="webp,png,jpg" alt="alt">
+}
+
+imageFormatFallback.data.supportedFormats = [];
+
+
+if(window.addEventListener) {
+    window.addEventListener("load",function() {
+        checkSupportedImageFormats();
+    });
+} else {
+    window.setTimeout(function() {
+        attachEvent("onload", checkSupportedImageFormats());
+    },100);
+}
+
+
+function checkSupportedImageFormats() {
+    imageFormatFallback.elements.checkDiv = document.createElement("div");
+    imageFormatFallback.elements.checkDiv.style.position = "fixed";
+    imageFormatFallback.elements.checkDiv.style.top = "-400px";
+    imageFormatFallback.elements.checkDiv.style.opacity = 0;
+
+    document.body.appendChild(imageFormatFallback.elements.checkDiv);
+
+    spawnIMGs();
+}
+
+
+function spawnIMGs() {
+    imageFormatFallback.elements.check = [];
+    function spawnTestImage(format,base64String) {
+        imageFormatFallback.elements.check[format] = document.createElement("img");
+        imageFormatFallback.elements.check[format].alt = "";
+        imageFormatFallback.elements.check[format].setAttribute("onload","if(this.offsetWidth > 90 && this.offsetHeight > 90) {imageFormatFallback.data.supportedFormats.push('"+format+"')}");
+        imageFormatFallback.elements.check[format].src = base64String;
+        imageFormatFallback.elements.checkDiv.appendChild(imageFormatFallback.elements.check[format]);
+    }
+
+    spawnTestImage("png","data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkAQMAAABKLAcXAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAGUExURQAAAAAAAKVnuc8AAAACdFJOU/8A5bcwSgAAAAlwSFlzAAAOwwAADsMBx2+oZAAAABlJREFUOE9j+I8EPjCM8kZ5o7xR3iiPxjwAvusJXPgOWb4AAAAASUVORK5CYII=");
+    spawnTestImage("bmp","data:image/bmp;base64,Qk16BgAAAAAAADoAAAAoAAAAZAAAAGQAAAABAAEAAAAAAAAAAADEDgAAxA4AAAEAAAABAAAA/////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=");
+    spawnTestImage("gif","data:image/gif;base64,R0lGODlhZABkAHAAACH5BAEAAAEALAAAAABkAGQAgQAAAAAAAAAAAAAAAAJzjI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTNf2jef6zvf+DwwKh8Si8YhMKpfMpvMJjUqn1Kr1is1qt9yu9wsOi8fksvmMTqvX7Lb7DY/L5/S6/Y7P6/f8vv8PGCg4SFhoeIiYqLjI2Oj4CGlYAAA7");
+    spawnTestImage("jpg","data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4QBoRXhpZgAATU0AKgAAAAgABAEaAAUAAAABAAAAPgEbAAUAAAABAAAARgEoAAMAAAABAAIAAAExAAIAAAARAAAATgAAAAAAAABgAAAAAQAAAGAAAAABcGFpbnQubmV0IDQuMi4xNAAA/9sAQwD//////////////////////////////////////////////////////////////////////////////////////9sAQwH//////////////////////////////////////////////////////////////////////////////////////8AAEQgAZABkAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/aAAwDAQACEQMRAD8AkooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigAooooA//2Q==");
+    spawnTestImage("webp","data:image/webp;base64,UklGRuIAAABXRUJQVlA4WAoAAAAYAAAAYwAAYwAAVlA4TA0AAAAvY8AYEAcQERGIiP4HAEVYSUauAAAASUkqAAgAAAAGABIBAwABAAAAAQAAABoBBQABAAAAVgAAABsBBQABAAAAXgAAACgBAwABAAAAAgAAADEBAgARAAAAZgAAAGmHBAABAAAAeAAAAAAAAABgAAAAAQAAAGAAAAABAAAAcGFpbnQubmV0IDQuMi4xNAAABAAAkAcABAAAADAyMzABoAMAAQAAAAEAAAACoAQAAQAAAGQAAAADoAQAAQAAAGQAAAAAAAAA");
+    spawnTestImage("jxr","data:image/vnd.ms-photo;base64,SUm8AQgAAAANABoBBQABAAAAqgAAABsBBQABAAAAsgAAACgBAwABAAAAAgAAADEBAgARAAAAugAAAAG8AQAQAAAAzAAAAAK8BAABAAAAAAAAAAS8BAABAAAAAAAAAIC8BAABAAAAZAAAAIG8BAABAAAAZAAAAIK8CwABAAAAAADAQoO8CwABAAAAAADAQsC8BAABAAAA3AAAAMG8BAABAAAAmQAAAAAAAABgAAAAAQAAAGAAAAABAAAAcGFpbnQubmV0IDQuMi4xNAAAJMPdbwNO/kuxhT13do3JDFdNUEhPVE8AEUbAcQBjAGNwAM4Pb2zhCQjPEVFAAAEAAAAeAGH/AARCgAABAAABAYEAABAAACAAAgABAAQAgIVVVVVVVVVVVVVUAAABAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQNHJ///////+A==");
+    spawnTestImage("tga","data:image/x-tga;base64,AAAKAAAAAAAAAAAAZABkABgA4////+P////j////4////+P////j////4////+P////j////4////+P////j////4////+P////j////4////+P////j////4////+P////j////4////+P////j////4////+P////j////4////+P////j////4////+P////j////4////+P////j////4////+P////j////4////+P////j////4////+P////j////4////+P////j////4////+P////j////4////+P////j////4////+P////j////4////+P////j////4////+P////j////4////+P////j////4////+P////j////4////+P////j////4////+P////j////4////+P////j////4////+P////j////4////+P////j////4////+P////j////4////+P////j////4////+P////j////4////+P////j////4////+P////j////4////+8BAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAKAB0A5AcKABQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHBhaW50Lm5ldCA0LjIuMTQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAAAAEAAQABAAEAAAAAAAAAAAAAAAAAAKIBAAAAAAAAVFJVRVZJU0lPTi1YRklMRS4A");
+    spawnTestImage("tiff","data:image/tiff;base64,SUkqAEQAAACAACBQOCQWDQeEQmFQuGQ2HQ+IRGJROKRWLReMRmNRuOR2PR+QSGRSOSSWTSeUSmVSuWS2XS+YTGZRmAgQAP4ABAABAAAAAAAAAAABBAABAAAAZAAAAAEBBAABAAAAZAAAAAIBAwABAAAAAQAAAAMBAwABAAAABQAAAAYBAwABAAAAAwAAABEBBAABAAAACAAAABUBAwABAAAAAQAAABYBBAABAAAAZAAAABcBBAABAAAAPAAAABoBBQABAAAACgEAABsBBQABAAAAEgEAACgBAwABAAAAAgAAADEBAgARAAAAGgEAAD0BAwABAAAAAQAAAEABAwAGAAAALAEAAAAAAAAAdwEA6AMAAAB3AQDoAwAAcGFpbnQubmV0IDQuMi4xNAAA//8AAP//AAD//wAA");
+
+
+    function fixImages() {
+        window.setTimeout(function() {
+            imageFormatFallback.elements.checkDiv.outerHTML = "";
+            imageFormatFallback.elements.checkDiv = "";
+
+            imageFormatFallback.elements.img = document.getElementsByTagName("img");
+
+            for(var i=0; imageFormatFallback.elements.img.length > i; i++) {
+                if(imageFormatFallback.elements.img[i].getAttribute(imageFormatFallback.config.fallbackAttributeName)) {
+                    var thisFormats = imageFormatFallback.elements.img[i].getAttribute(imageFormatFallback.config.fallbackAttributeName).split(",");
+                    var thisOriginalFormat = imageFormatFallback.elements.img[i].getAttribute("src").split(".").pop();
+                    imageFormatFallback.elements.img[i].setAttribute("originalformat",thisOriginalFormat);
+
+                    if(imageFormatFallback.data.supportedFormats.indexOf(thisOriginalFormat) > -1) {
+                    } else {
+                        for(var j=0; thisFormats.length > j; j++) {
+                            if(imageFormatFallback.data.supportedFormats.indexOf(thisFormats[j].replace(/\s/g, '')) > -1) {
+                                var newSrc = imageFormatFallback.config.fallbackPrefix + imageFormatFallback.elements.img[i].getAttribute("src").split(thisOriginalFormat)[0] + thisFormats[j].replace(/\s/g, '');
+                                imageFormatFallback.elements.img[i].setAttribute("src",newSrc);
+                                break;
+                            }
+                        }
+                    }
+                }
+            }
+        },100)
+    }
+    fixImages();
+}
diff --git a/img/JS Included files/100.bmp → src/img/100.bmp b/img/JS Included files/100.bmp → src/img/100.bmp
diff --git a/img/JS Included files/100.gif → src/img/100.gif b/img/JS Included files/100.gif → src/img/100.gif
diff --git a/img/JS Included files/100.jpg → src/img/100.jpg b/img/JS Included files/100.jpg → src/img/100.jpg
diff --git a/img/JS Included files/100.jxr → src/img/100.jxr b/img/JS Included files/100.jxr → src/img/100.jxr
diff --git a/img/JS Included files/100.png → src/img/100.png b/img/JS Included files/100.png → src/img/100.png
diff --git a/img/JS Included files/100.tga → src/img/100.tga b/img/JS Included files/100.tga → src/img/100.tga
diff --git a/img/JS Included files/100.tiff → src/img/100.tiff b/img/JS Included files/100.tiff → src/img/100.tiff
diff --git a/img/JS Included files/100.webp → src/img/100.webp b/img/JS Included files/100.webp → src/img/100.webp