diff --git a/lazy-img.css b/lazy-img.css
new file mode 100644
index 0000000..76ecb25
--- /dev/null
+++ b/lazy-img.css
@@ -0,0 +1,8 @@
+img[loading='lazy'] {
+  opacity: 0;
+  transition: opacity 0.5s ease !important;
+}
+
+img.loaded {
+  opacity: 1;
+}
\ No newline at end of file
diff --git a/lazy-img.js b/lazy-img.js
new file mode 100644
index 0000000..b039547
--- /dev/null
+++ b/lazy-img.js
@@ -0,0 +1,14 @@
+document.addEventListener("DOMContentLoaded", function() {
+  /*var cssLink = document.createElement("link");
+  cssLink.rel = "stylesheet";
+  cssLink.href = "/cssjs/lazy-img.css";
+  document.head.appendChild(cssLink);*/
+
+  var images = document.querySelectorAll('img[loading="lazy"]');
+
+  images.forEach(function(image) {
+    image.onload = function() {
+      image.classList.add('loaded');
+    };
+  });
+});
\ No newline at end of file
diff --git a/lazy-img.min.js b/lazy-img.min.js
new file mode 100644
index 0000000..71eedc3
--- /dev/null
+++ b/lazy-img.min.js
@@ -0,0 +1 @@
+document.addEventListener("DOMContentLoaded",function(){document.querySelectorAll('img[loading="lazy"]').forEach(function(n){n.onload=function(){n.classList.add("loaded")}})});
\ No newline at end of file