Iframes, toggling and window.onload blocking UI

Love Foundation!

In our app however we have a problem. We are using several toggle-able components like, Off Canvas, Reveal, Dropdown and Toggler.

We added an iframe to our site that takes 10+ seconds or so for it to load its content. We noticed that all these components were 100% blocked until the iframe (ALL Iframes actually) loaded.

A little digging took us into the util.triggers.js where we found that the listeners for these items were applied on window.onload - not document.ready. This caused the elements in the UI to be totally unresponsive to the user until the iframes all loaded, triggering the window.onload event, thus applying the listeners. After the window.onload - every component worked perfectly.

This behavior is easily reproducible - and if I tweak the code in util.triggers to apply the listeners during document.ready - the UI is not blocked at all.

Is this by design? A bug? An oversight? Am I doing something wrong with these?

This is by design as we changed this in the past to wait till everything is loaded. You can try to initialize the components earlier and generate / load the iframes async / afterwards.


Thanks @DanielRuf ! We are doing that for SOME of the iFrames already - we are dynamically inserting the iFrames and setting SRC on document.ready and this seems to circumvent the window.onLoad issue. But this one new iFrame giving us trouble is being injected by some 3rd party javascript (WalkMe) immediately, not on document.ready…so I don’t really have control over what they are doing with their code so much…

We added their snippet and watched in horror as the UI was completely broken and unresponsive till their iFrame content loaded.

I’ll work on it and see what we can do - thank you for the reply and clarification though. At least I know it is by design.

maybe async oder defer can be used for their script and it can be loaded later or dynamically added using JS.

Our solution was to attach the loading of the script to the window.load event - that way Foundation can do all it needs to do - then the script executes - and the iframes load - and nothing is blocked.

The only down side is stuff “pops” in AFTER all the UI renders - we’re working around that for now though. Thank you again for your insight and help!