Delay loading of Hype until after webpage loads?

Using JavaScript with Hype
1

Hi I have an interactive map that is slowing my website down (10 sec to load page) due to a lot of network requests to vimeo happening at the beginning of the file.

Is it possible to delay the loading of the iframe that contains hype until after the page loads? or hype itself?

The only thing I can think of is a JS timer function that delays the iframe loading for a short time - any help greatly appreciated.

:rotating_light: Please note that we can only address JavaScript questions and issues in the context of Tumult Hype, so please attach a Hype document so others can dig into what you have so far.

2

the very easiest approach is the attribute loading="lazy" on the iFrame-Tag

2 Likes
3

Thanks @h_classen that did cross my mind will give it a try!

4

You can also just use a timeline and timeline action or even simpler an innerHTML keyframe.

1 Like
5

Just closing this off with a solution - thanks for the tips.

The solution came from this post > Lazy Loading iframes - #4 by Pathfinder

I used the data-vimeo-defer option in each Vimeo iframe (18 in total x3 layouts) This had the effect of reducing the network calls to/from vimeo from +500 down to less than 50 drastically reducing the page load time and improving performance.

<iframe loading="lazy" data-vimeo-defer src="https://player.vimeo.com/video/148751763?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen title="You'll never guess what this video is!" ></iframe>

Note: For this to work the vimeo embed code must be inside a HTML widget in Hype rather than a rectangle object.

3 Likes