Does xara support (lazy loading) to help with page loading times? I would think this can be done in the image web Properties/Placeholder/HTML code (body) and or (head). What code is needed?
Does xara support (lazy loading) to help with page loading times? I would think this can be done in the image web Properties/Placeholder/HTML code (body) and or (head). What code is needed?
This would need to be done by inserting code with a placeholder, I think. I am not sure.
A placeholder is a simple shape, a rectangle for example into which you add the code.
Acorn or one of the other members will have a more specific answer.
Gary W. Priester
Mr. Moderator Emeritus Dude, Sir
gwpriester.com | eyetricks-3d-stereograms.com | eyeTricks on Facebook | eyeTricks on YouTube | eyeTricks on Instagram
These sorts of things are always churning through changes.
The essence is as follows:
- Xara has yet to implement lazy loading.
- Browsers are becoming more compliant with the use of the attribute 'loading="lazy"' for images.
- There are workarounds.
You would achieve this best with the later XDA versions that support Image Filenames & the WebP format.
The approach would be to place all your lazy images on a lazy.htm page that ensures they are all uploaded as part of the website.
lazy.htm is never accessed directly.
Each image requires a unique filename, say, lazypicture.jpg.
Drag and scale your image onto its webpage.
In its Placeholder body, add code:
<img src='index_htm_files/lazypicture.jpg' width=100% height=100% loading='lazy' />
Although your design is showing the picture, it is not directly rendered.
The code ensures it is not loaded into the page until you start scrolling.
I find you always need a non-lazy image near the page bottom to stop the first lazy one loading right off.
Here is a simple example: Browser Lazy Loading.xar
To construct with earlier XDA versions, you may want to read the Thread https://www.talkgraphics.com/showthr...283#post623283.
I think it is the right time for loading='lazy' to be an image attribute that Xara handles without all this fudging.
Acorn
Last edited by Acorn; 21 August 2022 at 02:32 PM.
Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat
I have moved this thread to Xara Web Design Chat.
Gary W. Priester
Mr. Moderator Emeritus Dude, Sir
gwpriester.com | eyetricks-3d-stereograms.com | eyeTricks on Facebook | eyeTricks on YouTube | eyeTricks on Instagram
+1 in my opinion.I think it is the right time for loading='lazy' to be an image attribute that Xara handles without all this fudging.
I know your xar is only a demo but wouldn't it be better to create the images at actual size in the lazy.htm page? In your demo the images are loading at only a third of their full resolution.
Egg
Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host
@Egg, thanks for the endorsement.
The pictures are full resolution of those on the lazy.htm page. These are 96dpi of the originals.
The rendered ones that you can see are the same resolution of those.
To get the fullest, original resolution, you would just have to rescale those on the lazy.htm page so to be their original sizes.
@96dpi, the camel image is 4000x3000px; I just added the master images to fit the page as not doing so might have disturbed others accessing the file.
This approach ignore Retina.
Acorn
Last edited by Acorn; 22 August 2022 at 11:20 AM.
Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat
I have created a very deep page with random images that lazy load as you scroll to the foot.
Use F12 > Network to see the images load.
The bottom Default is a click link to refresh to page and use a different random set.
The Xara download is around 150kB.
The images are a further 850kB and only during a scroll, one by one.
Browser Lazy Loading into a Long Page.xar
Acorn
Acorn - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat
Loved that Acorn, it's a great asset. Messed about with your xar file and produced a site that doesn't load random images as yours does but in a practicle use why would you apart from your example of how it works. It works excellently with delayed loading images outside of the viewport. Very impressed.
DEMO
Egg
Intel i7 - 4790K Quad Core + 16 GB Ram + NVIDIA Geforce GTX 1660 Graphics Card + MSI Optix Mag321 Curv monitor + Samsung 970 EVO Plus 500GB SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host
Bookmarks