Change image attribute

1

Is there a way to change an image’s src ‘attribute’ into data_src within Hype?

So instead of:
<img src="cheese.jpg" />
it looks like
<img class="lazy" data-src="cheese.jpg" />
when exported from Hype?

I’m trying to see if I can “lazy load” images when exported from Hype but for that I need to change some image attributes to prevent all images to “lazy load” (if I get it to work at all).

1 Like
2

except some rare cases hype does not make use of the img-tag.
instead pictures are placed as backgroundimages …

if you place your images as innerHTML …

1 Like
3

argh… I feared so much. I got something like 500+ images to embed… (not in 1 document!)

Thank you for chiming in though! :blush:

4

Sadly that didn’t work ( place images as inner HTML). The moment I modify the img-tag in inner HTML the image stops loading.

Guess I’ll have to make do without lazy loading for now. :neutral_face:

5

You can have images as inner HTML if you start with a blank element (Rectangle) and then reference the image via the ${resourcesFolderName} like:

<img src="${resourcesFolderName}/myImage.png">

The ${resourcesFolderName} magic variable is replaced at export time with the name of your .hyperesources folder so it gets referenced correctly.

Also make sure to uncheck Automatically optimize when exporting for the image in the resources library otherwise there’s a chance Hype may be changing the name as part of the optimization process.

1 Like
6

@jonathan Thank you for your help!

I found a very small script that smoothly lazy loads images. It looks if an image has a “src” or an HTML5 “data-src” attribute. The script leaves the images with a sole “src” attribute alone but lazy loads images with the “data-src” attribute.

The problem is that Hype doesn’t seem to accept a “data-src” attribute.

<img src="${resourcesFolderName}/myImage.png">
is ok but
<img data-src="${resourcesFolderName}/myImage.png">
is not ok.

That is the little ‘bump in the road’ I’m stumbling over. :upside_down_face:

7

as the loading is related to your library it’ll only happen in preview and export.
you may provide a samplefile …

8

Hi Hans!
Ok here’s you’re sample. :slightly_smiling_face:
sample.zip (300.5 KB)

I just don’t get why a 5-6 year old HTML5 attribute like “data-src” isn’t picked up by Hype.

9

i did not include any js-library or code. so this can not work …

11

My apologies for that, I wasn’t thinking (at all). :confounded:

If you have time could you please take a look at this?
lazyload.zip (379.2 KB)

12

you’ll need to run the script once onsceneload and remove the ‘DomContentLoaded’ otherwise it’ll never be active …lazy_load.hype.zip (127.4 KB)

2 Likes
13

Btw what is your goal. You want the image to load when it rolls into view or when the scene is chosen where it resides?

14

@h_classen Thank you so very much! I tried to put the script on sceneload but removing the DomContentLoaded is something I never would consider, given my lack of knowledge when it comes to scripts and code.
Thank you again for your help. :smiling_face_with_three_hearts:

@MaxZieb Goal is to keep it simple :sweat_smile: To load when the image comes into view.

1 Like
15

I'm glad you got this working! Just to note:

data-src is not a specific attribute that does anything and has no meaning to browsers. The external javascript library you are using does make use of it, though. Often external libraries scan the DOM (HTML structure of the page) and then do operations; since the DOM is dynamically constructed by Hype's runtime, the library's scan can sometimes have happened before Hype made the elements and therefore it didn't do anything. The solution is to manually invoke the scan at some point.

There is a good request to allow adding arbitrary HTML tag attributes (with or without the data- namespace) that is on our feature tracker :slight_smile:.

1 Like