Lazy Loading

[gcellison]

Happy Wednesday! Hoping everyone is well.

While a lot of us design websites using WDP and DPX, and we’re satisfied with (or at least resigned to) the limitations it imposes, others are more interested in pushing those limits, and a number of them regularly participate in this forum.

Over the past few months, I’ve been trying to put myself into that second category little by little. Still new. Learning about the code that underlies web design can open up a lot of powerful doors within the Xara software.

My current question concerns Lazy Loading. For those who aren’t familiar, this is what it’s called when the web browser delays downloading an element (particularly an image) from the server until the user scrolls far enough down to trigger it. You recognize this is happening when an image first comes into view still as a grey box or blurry, then suddenly appears clear.

Lazy loading saves time, money, and resources on the user’s end. For mobile devices, particularly using paid bandwidth, it is significant.

Implementing lazy loading doesn’t appear to be incredibly complicated. While there are some script plugins (some paid) to do it, you can find a reasonably short JavaScript function that can be copied and pasted in the body HTML code under the page tab (or website tab) of the web properties dialog. You also have to assign a class (by naming the image htmlclass=“lazy”) to each image to which it applies.

The problem is that this technique for lazy loading, and all of the others, require assigning a data-src attribute to the images rather than an src attribute. This tells the browser not to load the image automatically, but to wait until it receives the instructions elsewhere (e.g., from the JavaScript function).

The code that WDP / DPX generates on export assigns all images the src attribute. This is not surprising since it is the standard method for showing images. But it tells the browser to download the image immediately, making lazy loading impossible.

So, at last, thanks to anyone with the patience to have read all of this. My question for anyone who might have looked into finagling your website projects into allowing lazy loading, how did you go about it?

Also, does anyone know of a straightforward way to coerce the program into assigning the data-src attribute to an element instead of src?

As always, many thanks for any advice.

[Chris M]

Xara has this feature built in under: Utilities > Web Animation > Reveal/Scroll.

You can set triggers by using named objects and then assigning the Trigger Object Name.

[Acorn]

Xara has this feature built in under: Utilities > Web Animation > Reveal/Scroll.
You can set triggers by using named objects and then assigning the Trigger Object Name.

Chris, sorry to disagree, the triggered image is simply in a DIV that is hidden until the trigger fires. The image has a src that the DOM fetches regardless.

It is not lazy loaded.

Acorn

[gcellison]

Thanks @ChrisM.

@Acorn is right. I’m familiar with the web animation features in Xara. The images are downloaded from the server as usual when the browser encounters the request. They just aren’t shown until the user scrolls down to the trigger.

The benefit of lazy loading is that the image is never even downloaded unless it is triggered.

Perhaps it sounds like a nuance, but it is significant to the speed at which the page downloads and, particularly for mobile devices, how quickly the user perceives that the page is ready. It can also save the user the cost of the bandwidth.

Apparently Chrome has been working on a way to do this natively, but it still appears to be in the making. And even then, who knows when the other browsers will implement it.

[Chris M]

The benefit of lazy loading is that the image is never even downloaded unless it is triggered.

That's the bit I didn't know. I was under the impression that's what Xara did because I have the coding knowledge of your average Salamander.

[siran]

But maybe we can use the reveal feature to implement something like that.
I made a test but am not sure if it really works. I would have to analyze the traffic of the browser.
Acorn do you have a plugin installed that can tell when the pictures are first fetched from the server?

[Acorn]

But maybe we can use the reveal feature to implement something like that.
I made a test but am not sure if it really works. I would have to analyze the traffic of the browser.
Acorn do you have a plugin installed that can tell when the pictures are first fetched from the server?

Sorry siran, both images are pre-loading.

The easy way to check is to locate the Preview folder in %localappdata%/Temp and examine index_htm_files/; both images are there.
My other quick check was in Chrome Developer Tools.

Acorn

[Acorn]

Not the solution (yet) but I am sure siran will rise to the challenge.
I use this approach for rollover images that are blurred to sharp. All I have done is deferred the image loading until needed (on hover).

What I have created is a deferred or hover:lazy-loading of a rollover image that replaces the block placeholder with a higher definition one.

All this needs is for the image not to offer up an src, which results in an immediate fetch.

I replace the IMG with a blank DIV and a ClassName.
I use CSS to add a background-image (this is url(image_address)), which only fetches the blocky placeholder.
On hover, the rollover background image is fetched and replaces the original.

Normally, one would place the hires images in a separate folder, but as I am trying to demonstrate this all in Xara, you must do the following:

• First, in the demo file, Shift+F5 to Preview the images page. This pre-loads the hires images into the index_htm_files/ folder. [Not really needed, I was being over-cautious, just Preview Website]
• Second, Preview the Website (F5); the index file opens and open your preferred browser from the Preview icon.
• Third, in your browser, go to Developer Tools (F12) > Sources and open the index_htm_files/ folder. The only file for the image will be the placeholder one.

As you hover over the images, the hires one is called up.
Use Ctrl+F5 to clear the cache to replay the lazy-loading.

A Placeholder image similar to:

<img src="index_htm_files/Marbles_64x64.jpg" width="100%" height="100%" style="filter:blur(2px);"  />

A rollover with replacement is simpler:

<div class="marbles size128"></div>

All have the Class "marbles"; they then have options for another Class "size128 | size256 | size512 | (default)"; the default omits this Class to present the original highest resolution image.

It relies on this CSS to do the heavy lifting.

Website Code (Head):

<style>.marbles {
  box-sizing: border-box;
  width: 100%; /* Width of new image */
  height: 100%; /* Height of new image */
  background-image: url(index_htm_files/Marbles_64x64.jpg);
  background-size: cover;
  blur(2px);
  transition: background-image 0.4s ease-in-out;
}
.marbles:hover {
  background-image: url(index_htm_files/Marbles.jpg);
  background-size: cover;
}
.marbles.size512:hover {
  background-image: url(index_htm_files/Marbles_512x512.jpg);
  background-size: cover;
}
.marbles.size256:hover {
  background-image: url(index_htm_files/Marbles_256x256.jpg);
  background-size: cover;
}
.marbles.size128:hover {
  background-image: url(index_htm_files/Marbles_128x128.jpg);
  background-size: cover;
}

</style>

CSS - Marbles.xar

I picked a square 1024px image and halved its size down a number of times to 64px and gave all the images meaningful Image filenames.
The smaller images are for Variants. I stopped the placeholder at 64px but you could go all the way down to 1px square!

To achieve true lazy loading, the hover trigger need to be invoked while the image is about to enter the viewport.

The lores placeholder images are in place to prevent reflow of other DOM elements, though this is less important in a Xara design, it is still good practice.

Acorn

[Acorn]

I think I have a winner.

CSS - Full Xara Lazy Loading.xar

Much simpler CSS and using the Xara Web Animation > Reveal with a Trigger object.

Far cleaner.

Acorn

[Acorn]

I think I have a winner.

CSS - Full Xara Lazy Loading.xar

Much simpler CSS and using the Xara Web Animation > Reveal with a Trigger object.
Far cleaner.
Acorn

For those without v17 and its Image Filename input box, you need to use the special Name filename="Marbles_64x64", etc for the code to find you images.

Acorn