2

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>
skrubbles
  • 21
  • 2

2 Answers2

1

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

 pace-options = { elements: { 
          selectors: [".class1", "#id1", ".class2"] 
       }
  }
dynamo
  • 1,123
  • 10
  • 14
0

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.

Mike Padg
  • 63
  • 7
  • No videos in the iframes. My question is specifically about the pace.js loading bar recognizing when all the iframes on a page have rendered their content before declaring that the page has loaded to 100%. – skrubbles Jul 07 '15 at 17:38