diff --git a/ignite-html-lazyload.js b/ignite-html-lazyload.js
new file mode 100644
index 0000000..18241e0
--- /dev/null
+++ b/ignite-html-lazyload.js
@@ -0,0 +1,40 @@
+import { IgniteProperty } from "../ignite-html/ignite-html.js";
+import { IgniteTemplate } from "../ignite-html/ignite-template.js";
+
+/**
+ * Lazy loads an image in the src attribute for this element.
+ * @param {string|Function|IgniteProperty} placeholder The palceholder image to use before the image is loaded. If null, a default one will be used.
+ * @returns {IgniteTemplate} This ignite template.
+ */
+IgniteTemplate.prototype.lazy = function (placeholder = null) {
+    //See if we have a src attribute already defined.
+    if (this._attributes["src"]) {
+        //Save the original source.
+        this._lazy_src = this._attributes["src"];
+
+        //If we have a placeholder set it
+        if (placeholder) {
+            if (placeholder instanceof IgniteProperty) {
+                this._attributes["src"] = placeholder.value;
+            } else if (placeholder instanceof Function) {
+                this._attributes["src"] = placeholder();
+            } else {
+                this._attributes["src"] = placeholder;
+            }
+        } else {
+            //Use default transparent empty png if no placeholder.
+            this._attributes["src"] = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=";
+        }
+
+        //Add an intersect event to this template.
+        this.onIntersect(() => {
+            //Move the original source into the attribute.
+            this._attributes["src"] = this._lazy_src;
+
+            //Modify the attribute on the element directly.
+            this.element.setAttribute("src", this._lazy_src);
+        });
+    }
+
+    return this;
+};
\ No newline at end of file