Doesn't account for iframe content

[skrubbles]

I have a few iframes on my pages that use pace.js. The problem is that the pace.js loading bar fills to 100% before the content inside of these iframes have fully rendered. Is there a way to make it so that pace.js recognizes when the content inside these iframes have completely loaded?

I've tried setting the paceOptions to wait for the iframe selector to load before deciding that the page has finished loading, 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>

[MentalGear]

Came here with the exact same problem. Thanks for pointing me in the correct direction: The problem is indeed that Pace doesn't check if a element is fully loaded, but merely if it exists in the DOM.

Therefore, to make it work for an iframe, or any other type of content, you must look for an element inside the element you are loading. For example, if it is a video, you could use:

   Pace.options.elements.selectors = [".Lightbox_Container iframe video"];
   Pace.restart();

Or if you are not sure what the content will be use some jquery selector magic:

Pace.options.elements.selectors = [".Lightbox_Container iframe:not(:empty)"];
Pace.restart();

Works like a charm for me (limited testing on chrome). If you find any issues with this, let us know here.

EDIT: Maybe I was too premature. This doesn't work as expected, but maybe it helps someone finding the right way.

[data-handler]

$('#' + targetElementId).attr('src', url).load(url);

[krisherring]

Hey guys - I know this is a cheap solution, but I managed to get a little functionality out of it. I have a page with multiple lightboxes for JotForms, and hit a wall for hours until I did this simple thing. Since you have to click a link/button for the lightbox to pop up, I just added the inline attribute to my anchor tag like so:

<a class="bla u-blah responsive-blah" onClick="Pace.restart()" >linky-majig</a>

[katasea]

Pace.restart() it works , thanks!