Add option to load visuals a few slides before -> viewDistance

[nbremer]

A feature request. Right now the visuals are loaded when the slide comes into the screen, meaning that (when something heavy) needs load, you start out with an empty screen before the visual flashes on. I was therefore wondering if it was possible to add something akin to viewDistance from revealJS, where you could set how many slides in advance you want to have reveal.js-d3 to start loading the html file.

Not sure if this is possible because it has to be done by revealJS, but perhaps the data-preload could somehow be used from the lazy loading of iframes?

[gcalmettes]

Alright, I started to play with this idea, and it seems that this is doable! Thanks for making me aware of all those new features by the way, I haven't had the opportunity to create a brand new presentation in a while, so I haven't followed much what had changed in the latest Reveal.js updates.

To be honest, that might even simplify how the plugin works ... right now, the iFrames are created only when we navigate to the slide, but because Reveal.js lazy loads all the iFrames by default, it means that I can create all the iFrame when the presentation loads, and only the ones with the data-preload attribute will be loaded in advance if the viewDistance has been set in the options.

I still have to integrate the automatic creation of the fragments in the slide and the option to trigger the latest transistion, but I have a pseudo-working demo right now. Exciting!

[nbremer]

Awesome! :D Having the data-preload working for this plugin to give the behavior of viewDistance would be great!

Just to note, I'd love to keep the current behaviour though that it destroys the visual/iframe after you move far enough away (as in, either immediately on slide change, or on viewDistance, so that not too much heavy visuals/iframes remain in the DOM. But that it does reload again if you move backwards and come within viewDistance again)

An no problem! I've been wanting to try out your plugin ever since you notified me about it (what, like a year ago?), but it's literally been that long since I started a brand new (revealJS) presentation, hehe (*^▽^*)ゞ

Good luck with the updates!

[gcalmettes]

@nbremer, a compatible version of the plugin with the viewDistance/data-preload combo can be found in the lazy-loading branch.

Just set the viewDistance option to something greater than 1 and add the data-preload attribute to the container of the visualization you want to preload, and that should work as expected.

I still have to make sure nothing else is broken, but any chance you could test if it works for you? Note that the keepIframe option doesn't exist anymore, since it is completely useless now with the new implementation of the plugin.

And to answer your question, the iframes are not destroyed anymore, but the content is killed once you get outside of the viewDistance window, so this should not influence performance.

[gcalmettes]

Everything seems in order, I have merged the changes!

[nbremer]

Great! Sorry it was already midnight when I got your message, I had intended to try when I would wake again, hehe (going to try it now ^^)

[nbremer]

For me the visuals/iframes that used to be added to the .background section are added to the .slides section instead. For me this now results in those "full-screen" visuals to no longer appear as full screen, but smaller (even in 1920x1080). Would it be possible to add the visuals back to the .background section again, if they are added on a slide's section itself?

(I also notice that all iframes get loaded at the start, and not only within viewDistance away from the slide though. Not sure if that would make the presentation too heavy, if everything is loaded. I'm sorry, I don't know how to check if the content of an iframe is killed, in case that is what is happening when you are father than viewDistance away. Does that mean that there should be no document present within the iframe?)

BTW, with all visuals being loaded at the start, this has helped to make sure my data is loaded when I get to the slide, either moving forward or backward, so it sort of solves #17 as well (although I'd still be curious for that demo though).

[nbremer]

And I noticed that it goes even more "wrong" when your window isn't upholding the 1920x1080 (or whatever size you've set in the options), see for example:

So I'd really need that full background option from before, hehe :)

[gcalmettes]

I spotted the problem, the iframe has to be on the new slide-background-content to be in full screen. Fixing it right now.

[gcalmettes]

@nbremer, commit 496bb070b253001d69e58bf0ba4fb3b76325424d should have fixed the issue. It's in the latest master. Does that work on your end?

[gcalmettes]

@nbremer Also, note that to add your visualization in the background (background slides section of Reveal), don't use the data-background-iframe attribute of Reveal, just create your slide with:

<section class="fig-container" data-file="path/to-your/html">
    <h1>Your title</h1>
</section>

The above should give you what your are looking for.

Note that by default, if the .fig-container class is added to the <section> tag, then the iframe will be added in the corresponding background slide (in the "background" slide section of Reveal). If you want it to be added to the <section> and not to the corresponding background slide, then you can add the data-no-background option:

<section class="fig-container" data-file="path/to-your/html" data-no-background>
    <h1>Your title</h1>
</section>

[gcalmettes]

And to answer your question about the loading of the iframes, they are now created when the presentation initializes, but their loading (documentContent) is dependent of the viewDistance option if it has been setup. So yes, it is normal that from the start all the <iframe> tags will be added to the slides, but they won't be loaded until you get to the slide (or are within the viewDistance).

You can check the behavior by looking at the <html> inside the #document of the iframe: once you get out of the window range, it will become an html with empty body and head.

[nbremer]

Thank you for looking into this (and all the others) so fast! (thank you explaining the killing of the iframes!).

I'm afraid though that it now only works when I reload the slide where the full background should be, and then only for that slide, while you're on it. For me all the iframes do get loaded at the start (empty <html> indeed, however it's still empty for slides within viewDistance), but then when I move just one slide, all the iframes are destroyed, and I only see the original empty <div class="slide-background-content"></div> in the .slide-background's that contained the iframes.

I'm now calling it like this:

<section id="constellations-star-setup" class="fig-container" data-file="sections/2. figures/slide-star-setup/skymap_setup.html" data-scroll="no" data-preload></section>

<section id="constellations-final" class="fig-container" data-file="sections/2. figures/code/" data-preload></section>

(It makes no difference if I put the data-preload on it or not, the same behavior stays)

[gcalmettes]

Ah! Will look into it. I don’t see this behavior on my end, so maybe I need to make a more complex presentation than the current demo.

[nbremer]

Just send you a simplified version of my current presentation that still has the issue. Hope you can spot what might be going on :)

PS: I did notice that when using data-no-background it does show my visuals/iframes. But yeah, then we're back at the issue from a day ago, haha

[gcalmettes]

Thanks for sending your presentation to me, it helped a lot in understanding the problem! I believe #19 should have fixed the issue! Merged on master.