Adding V1 of LazyLoad.
Pushing up V1 of the lazy load plugin.
This commit is contained in:
		
							
								
								
									
										40
									
								
								ignite-html-lazyload.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										40
									
								
								ignite-html-lazyload.js
									
									
									
									
									
										Normal file
									
								
							| @@ -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; | ||||||
|  | }; | ||||||
		Reference in New Issue
	
	Block a user