mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-12-24 17:10:29 +00:00
Image lazy loading (#6809)
* Extend image widget with lazy loading support * docs: added from-version to docs update
This commit is contained in:
parent
39996c7a2f
commit
613b3df367
@ -111,6 +111,9 @@ ImageWidget.prototype.render = function(parent,nextSibling) {
|
||||
if(this.imageAlt) {
|
||||
domNode.setAttribute("alt",this.imageAlt);
|
||||
}
|
||||
if(this.lazyLoading && tag === "img") {
|
||||
domNode.setAttribute("loading",this.lazyLoading);
|
||||
}
|
||||
// Add classes when the image loads or fails
|
||||
$tw.utils.addClass(domNode,"tc-image-loading");
|
||||
domNode.addEventListener("load",function() {
|
||||
@ -137,6 +140,7 @@ ImageWidget.prototype.execute = function() {
|
||||
this.imageClass = this.getAttribute("class");
|
||||
this.imageTooltip = this.getAttribute("tooltip");
|
||||
this.imageAlt = this.getAttribute("alt");
|
||||
this.lazyLoading = this.getAttribute("loading");
|
||||
};
|
||||
|
||||
/*
|
||||
|
@ -1,8 +1,9 @@
|
||||
title: ImageWidget
|
||||
created: 20140416160234142
|
||||
modified: 20220101205921813
|
||||
tags: Widgets
|
||||
caption: image
|
||||
created: 20140416160234142
|
||||
modified: 20220721102303815
|
||||
tags: Widgets
|
||||
title: ImageWidget
|
||||
type: text/vnd.tiddlywiki
|
||||
|
||||
! Introduction
|
||||
|
||||
@ -19,6 +20,7 @@ Any content of the `<$image>` widget is ignored.
|
||||
|tooltip |The tooltip to be displayed over the image |
|
||||
|alt |The alternative text to be associated with the image |
|
||||
|class |CSS classes to be assigned to the `<img>` element |
|
||||
|loading|<<.from-version "5.2.3">>Optional. Set to `lazy` to enable lazy loading of images loaded from an external URI |
|
||||
|
||||
The width and the height can be specified as pixel values (eg "23" or "23px") or percentages (eg "23%"). They are both optional; if not provided the browser will use CSS rules to size the image.
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user