Material Design Lite All Elements Loaded JS Callback

Question

I have a page where I'm trying to render a header with MDL and then preload some images. Unfortunately, I'm running into a problem where the image preload function actually blocks the library from properly rendering elements until all the images are done preloading.

I've tried putting the preload function in a timeOut with 2 seconds, but while that works for most fast connections, on slow enough connections, the same problem seems to arise.

As a result, I'm looking for a way to be able to tell through Javascript when the library is done loading and executing - when all the elements are rendered properly. Is there a callback that MDL fires off that I can use to then begin preloading iamges?

Or is there a better alternative solution?

Answer 1

Use the mdl-componentupgraded event. Check the event's target and see if it is the layout component to start. I bet it is layout causing the problems here due to how we did it for legacy browser support. If it isn't layout, then just hunt and peck around until you find the piece causing the problem.