Thanks for sharing Acorn!
But, do we really need a background image? Wouldn't a text "Please wait, loading image..." or something like that be sufficient?
Anyway, great work!
Maybe the CSS at the website head should be mentioned?
Printable View
Thanks for sharing Acorn!
But, do we really need a background image? Wouldn't a text "Please wait, loading image..." or something like that be sufficient?
Anyway, great work!
Maybe the CSS at the website head should be mentioned?
gcellison, it might not have been said directly, but form the effort we have spent to work around it it might habe become obvious: We don't know of a way to tell Xara not to create a scr attribute.
There might be work-arounds, but in the end the final answer would be: No.
Acorn suggested a work-around by using a placeholder containing a DIV with a background image. I tried to change the scr attribute shortly after loading (but still the browser at least starts to download image file), I even read into mutation observer, but event those don't seem to give much advantage over a simple script at the end of the body element.
So from my point of view, as efficient Acorns method might be for stopping the browser from causing unneccessary traffic, your initial idea of asking Xara to create a data attribute instead of a src attibute might still be worth a feature request.
Thanks @siran and @Acorn.
Your follow-up comments are insightful. I hope to get to this quickly.
I really appreciate the effort on both your parts.
Just did some playing around again and now think the mutation observer not working as expected is a FireFox bug. Firefox starts loading the large images and interrupts it shortly after (wasting some kilobytes of traffic). Thios doesn't happen in IE11. Currently I don't have other browsers installed. So in case you are interested you could have a look HERE.
Very nicely done, siran.
While I was starting to look this over last evening, a storm blew in that took out the lights. They weren’t back until the wee hours. So only now have I been looking at your work again.
It appears that you’ve accomplished genuine lazy loading. I took the liberty of running the page through the Lighthouse performance analysis extension (I hope you don't mind), and it gives a successful score for "Defer offscreen images" (a.k.a. lazy loading). Congratulations! All within Xara’s design parameters.
The JavaScript is clever in accomplishing the necessary “data-” property. Admittedly, my knowledge is still low on the curve, but I can often manipulate existing snippets. With your permission I’ll incorporate your code into my design.
Again, thanks and congrats.
siran, this deserved the fullest praise!
Very twisty.
Acorn
Thanks a lot, but it is only the result of some experiments. There is still room for imrovements. Also not sure how it works together with the retina option, the mutation handler manipulates the images before Xara has a chance to switch to the high resolution images. And when used with variants it might also become a little more complex. At the moment I guess the placeholder has to be put on every variant and most of the code (all but the self-executing anonymous function) has to be moved to the head section to avoid multiple execution.
Off course it is okay to use it in any way you like, that's the rules of the forum, but it isn't really finished yet.
Got an improved example. I have changed the name to htmlclass=laz_i to avoid conflicts caused by other code using lazy as a class name.
The code has moved over to the website "HTML Code (head)" section (placeholder removed). It now adds an observer directly to the DIV with the ID "xr_xr" that contains about everything not sticky or stretchy, so it should also work with variants and supersites.
Also added some code that makes use of retina images if available and the website is scaling to fit or to browser width.
And the observer is now stopped when loading is finished to avoid manipulation of elements added at runtime (by widgets for example).
The temporary image is now inline (base64 encoded data url) to avoid unneccessary fetching from the server.
Also tried to add code that first fetches the image file and applies it when ready to hide the fetching from view. But that became instable for some unknown reason, so I removed it.
I think this should be quite stable, you can see a retina example HERE.
To use it on your own page you need to copy the code from the website head section to your document (may also go to the page head if you like). Then you have to give the pictures that shall do lazy loading the name (without the quotes) 'htmlclass=laz_i' and you have to add a reveal effect to the picture.
As mentioned above this will not work for stretchies and stickies.
Have tested in Designer Pro X 17.0.0 and 12.6.2.
What can I say, @siran? Again, congratulations. It is excellent.
Your efforts are greatly appreciated.
When one realizes what you managed to accomplish in less than two weeks, as a challenge rather than a job, it is frustrating that Xara can’t hire three or four yous and pay them to concentrate on this kind of work… to really bring WDP back to being state-of-the-art.
=D>