Pace.js not waiting for iframes to fully load

Question

I'm using pace.js on my site and I'm having difficulties with pages that have iframes. Is there a way to make it so that pace.js takes into account the content loading inside of those iframes?

I've tried setting the paceOptions to wait for the iframe selector to load before deciding that the page has fully loaded, but it seems to just recognize that an iframe is on the page, but not that the content inside has been rendered.

This is what I currently have:

<script>
paceOptions = {
    elements: {
        selectors: ['iframe']
    }
}
</script>
<script src="include/pace/pace.min.js"></script>

Answer 1

I've had this same issue with iframes. Especially when you want two or more frames to play live video feeds simultaneously.

I haven't come up with a proper solution, but I've been toying around with the idea of letting the whole page load with the iframes autoplay set to false, and then having a separate script start both of them as simultaneous as possible.

If it's a live video feed, I don't know if there are time stamps or not, or if it would be possible to pull the timestamps and have the two separate frames sync up like that. Just food for thought.

My problem has been, even if I get the frames to start together, network latency, etc causes the two separate live feeds to get off kilter.

Answer 2

You can add class or id to your iframe and use those in your pace initalizer.

 pace-options = { elements: { 
          selectors: [".class1", "#id1", ".class2"] 
       }
  }