mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-11-27 03:57:21 +00:00
Code Issues Releases Wiki Activity

Image widget: Add classes for loading/loaded/error

Browse Source
This commit is contained in:
jeremy@jermolene.com 2022-01-02 17:28:54 +00:00
parent 7d1f0ea8f4
commit 66ae1d6930
2 changed files with 19 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -111,6 +111,16 @@ ImageWidget.prototype.render = function(parent,nextSibling) {
if(this.imageAlt) {
domNode.setAttribute("alt",this.imageAlt);
}
// Add classes when the image loads or fails
$tw.utils.addClass(domNode,"tc-image-loading");
domNode.addEventListener("load",function() {
$tw.utils.removeClass(domNode,"tc-image-loading");
$tw.utils.addClass(domNode,"tc-image-loaded");
},false);
domNode.addEventListener("error",function() {
$tw.utils.removeClass(domNode,"tc-image-loading");
$tw.utils.addClass(domNode,"tc-image-error");
},false);
// Insert element
parent.insertBefore(domNode,nextSibling);
this.domNodes.push(domNode);

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

@ -1,6 +1,6 @@
title: ImageWidget
created: 20140416160234142
modified: 20140820100234142
modified: 20220101205921813
tags: Widgets
caption: image
@ -22,6 +22,14 @@ Any content of the `<$image>` widget is ignored.
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.
! Image Status Classes
<<from-version "5.2.2">> The following CSS classes are automatically added to the `<img>` element to indicate the status of the image. Note that only one of these classes will be added at the same time.
|''tc-image-loading'' |When the image is being loaded |
|''tc-image-loaded'' |The image has been loaded successfully |
|''tc-image-error'' |The image could not be loaded |
! External Images and the ''_canonical_uri'' field
When used to display tiddler-based images, the image widget operates in two distinct modes: