Improving lazy-loading flexibility

#1

I’m setting up a TW that I’m expecting to have a range of media types, and looking into lazy loading. afaict, currently there appears to be only two options: lazy-images and lazy-all

lazy-images is a nice start, but it still loads other media - my initial test has an mp3 and mp4 for instance, and I’d like to include many more media files, while still retaining the full text search capability of the text data. (

I see the lazy-images does this by loading anything which doesn’t match an [!is[system]is[image]] filter and feels (how naive am I being?) that an [is[media]] (or similar) filter that also covers audio/* and video/* types would be great. (I’m not sure how [is[image]] is determined - I’m assuming it’s by type of image/* and application/pdf)

Alternatively, is there a way to tell per-item that it should be lazy loaded (could it be as simple as setting _is_skinny directly? (correct me if I’m wrong, but this appears to be set dynamically when lazy loading is on?)

I feel like there are other ways to slice and dice which should be skinny (a size threshold, or per-bag?), but for my use at least, a simple [is[media]] (or equivalent) I think would be plenty!

(ftr, my tw5 is nodejs under linux, and keeping a close eye on MWS for the future, though yet to test the current version)

#2

@nemo if this were to be developed further perhaps it could support sending an instruction to load in the background ie into browser cache as another option?

  • I know other websites/webpages are often written to do this. Basicaly an instruction is sent to the browser to preload these files because they may/will be needed soon, but does this without pausing the display of page when loading the images and other resources. If not yet loaded an image icon is displayed indicating that.
#3

I can definitely see the benefit in that for some, though I think I’d want it to be an option - a site that has a lot of embedded videos could easily consume far too many network and memory resources loading a lot of potential media that end up never being used.

It does remind me of another question I have about lazy loading - does _is_skinny set a CSS class that gets cleared when the content is loaded? There have been a few occasions where it’s been unclear to me if an empty item is actually empty, or waiting for a slow server to lazy load content. A CSS class could let it be indicated (perhaps not unlike how non-existence gets indicated with a border), or maybe some loading gif be loaded as an indicator?

(this is the one I have on my splash screen, it’s a nice friendly 512 bytes)
kitt

#4

This is my method.

  • use a tag lazy to indicate all tidders which should be lazy-load
  • create a tiddler $:/core/save/lazy-data.
\define saveTiddlerFilter()
[is[tiddler]] -[prefix[$:/state/popup/]] -[[$:/HistoryList]] -[[$:/boot/boot.css]] -[type[application/javascript]library[yes]] -[[$:/boot/boot.js]] -[[$:/boot/bootprefix.js]] -[!is[system]tag[lazy]] +[sort[title]] 
\end
\define skinnySaveTiddlerFilter()
[!is[system]tag[lazy]]
\end
{{$:/core/templates/tiddlywiki5.html}}
  • Start tiddlywiiki in command line with lazy-data tiddler
tiddlywiki tiddlywiki --listen root-tiddler=$:/core/save/lazy-data
#5

Haven’t you seen that? My PR for this already merged, I thought it is released. Feat/loading by linonetwo · Pull Request #8505 · TiddlyWiki/TiddlyWiki5 · GitHub

And usually you have to only use lazy-image, otherwise backlink won’t show. Developer demo of alternate wiki store implementation by Jermolene · Pull Request #7329 · TiddlyWiki/TiddlyWiki5 · GitHub

#6

ah so it was. Turns out that TW was the first TW5 I’d setup, and was back on 5.3.3 from a year ago. Updating it, I see the animation now. lovely.

…as per my original post, the problem is that that only applies lazy to images, and not to other media, and my test files was already making the load size intolerably large.

However, since then I’ve wrapped my head around using external images that are served by nodejs from from files, and I think I’ll go with that rather than lazy anything, and so retain backlinks and full text search (that one is more important to me!)

#7

I also use this too. Luckily TidGi tiddlywiki app could auto add image to files/ folder when drag image in, and click import button.