mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-12-25 01:20:30 +00:00
Code Issues Releases Wiki Activity

Image lazy loading (#6809)

Browse Source 
* Extend image widget with lazy loading support

* docs: added from-version to docs update
This commit is contained in:
Saq Imtiaz 2022-07-21 16:30:56 +02:00 committed by GitHub
parent 39996c7a2f
commit 613b3df367
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
core/modules/widgets/image.js
View File

@ -111,6 +111,9 @@ ImageWidget.prototype.render = function(parent,nextSibling) {
if(this.imageAlt) { if(this.imageAlt) {
domNode.setAttribute("alt",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 // Add classes when the image loads or fails
$tw.utils.addClass(domNode,"tc-image-loading"); $tw.utils.addClass(domNode,"tc-image-loading");
domNode.addEventListener("load",function() { domNode.addEventListener("load",function() {
@ -137,6 +140,7 @@ ImageWidget.prototype.execute = function() {
this.imageClass = this.getAttribute("class"); this.imageClass = this.getAttribute("class");
this.imageTooltip = this.getAttribute("tooltip"); this.imageTooltip = this.getAttribute("tooltip");
this.imageAlt = this.getAttribute("alt"); this.imageAlt = this.getAttribute("alt");
this.lazyLoading = this.getAttribute("loading");
}; };
/* /*

10
editions/tw5.com/tiddlers/widgets/ImageWidget.tid
View File

@ -1,8 +1,9 @@
title: ImageWidget
created: 20140416160234142
modified: 20220101205921813
tags: Widgets
caption: image caption: image
created: 20140416160234142
modified: 20220721102303815
tags: Widgets
title: ImageWidget
type: text/vnd.tiddlywiki
! Introduction ! Introduction
@ -19,6 +20,7 @@ Any content of the `<$image>` widget is ignored.
|tooltip |The tooltip to be displayed over the image | |tooltip |The tooltip to be displayed over the image |
|alt |The alternative text to be associated with the image | |alt |The alternative text to be associated with the image |
|class |CSS classes to be assigned to the `<img>` element | |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. 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.