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.