search

hakimel / reveal.js

The HTML Presentation Framework
https://revealjs.com
MIT License
67.57k stars 16.63k forks source link

Preloader #703

Open criesner opened 10 years ago

criesner commented 10 years ago

Hi,

With slideshows normally being very long (and in my case filled with a lot of photos) i've found that while loading, text doesn't show up (?) and the frame/images don't center, until the page is fully loaded. I think adding a feature that either shows a clean loading screen (covers up the non loaded content) or a loading icon would be great. Or possibly a way to load a few slides in advanced that way you're not waiting on the entire slideshow from the beginning.

thanks for your considerations.

hakimel commented 10 years ago

Good idea and something I've been wanting to add as well.

tomByrer commented 10 years ago

I would assume the "text doesn't show up" because the .html file has not fully loaded? If that is the case, and your priority is to get the text viewable, I would assume an image delayer is needed, so the images are loaded after the DOM can be displayed.

criesner commented 10 years ago

@tomByrer turns out the text problem was due to a dirty file trail for an @fontface so it's solved now.

However, one thing that's bugging me about the load is that the elements (image/text) that I have absolutely positioned, load at the bottom of the page then snap up to where they should be when the loading is complete. @hakimel is this because of the frameworks resizing/centering feature and have you noticed this behavior in your heavier slides? I'm trying to figure out if it's my absolute positioning or the framework that's causing this.

rparree commented 10 years ago

@criesner were you able to create a "splash" screen?

eabigelow commented 10 years ago

A pre-loader would be terrific!

criesner commented 10 years ago

@rparree yes, I got a preloaded screen to work. I just did the normal method of creating a div with background color + loader icon and used some JS in a $(window).load(function() { }) It's working fine but It could definitely be a nice feature to this framework to have an option of setting up a custom preloading screen as these pages can get really large and take awhile to load

rparree commented 10 years ago

@criesner thanks for the reply!

Does it work on an ipad?

tx.,

criesner commented 10 years ago

@rparree yes it works on iPad/mobile devices If you've never set something like that up before there are plenty of resources online on how to get it up and running

rparree commented 10 years ago

Yes but currently i am working on an issue, and wanted to rule out it was not some of the inner workings of reveal's positioning that made the preloader not work. Having another hunch why it perhaps does not work.

BTW i agree a spashscreen and preloader would make a great addition to reveal.

akaleeroy commented 10 years ago

This feature suggestion is related to my request Lazy load media · Issue #793 · hakimel/reveal.js.

I really need it because my presentation is chock full of images. Most lazyload plugins fail in reveal.js as they are used to a normal scrolling page layout, and don't know when to load images.

kjetilk commented 9 years ago

Could it be possible to turn this feature into something that could be used if you're suddenly forced to do the presentation offline? I.e., run off to find wifi, preload the whole thing, and run back to present?

tomByrer commented 9 years ago

@kjetilk, that would require a 'manifest' file for applicationCache. https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache

Perhaps a separate request?

kjetilk commented 9 years ago

@tomByrer yeah, sounds like a good plan. :-)

leadingcode commented 9 years ago

I use caching presentations Here is an example, presentation name all.html Use file, in root presentation folder with this name: cache-manifest.appcache

# v1.0

CACHE MANIFEST
presentation/reduksin/all.html
presentation/reduksin/imsges/
presentation/reduksin/css/
presentation/reduksin/fonts/
presentation/reduksin/js/
presentation/reduksin/lib/
presentation/reduksin/plugins/

NETWORK:
# search.php
# login.php
# /api

FALLBACK:

Then in header all.html you need declare manifest="cache-manifest.appcache"

<!doctype html>
<html lang="en" manifest="cache-manifest.appcache">
    <head>
        <meta charset="utf-8">

And in .htaccess you need declare this line AddType text/cache-manifest .manifest

##
# @copyright    i.creative@yandex.ru
##
AddDefaultCharset UTF-8

# Cache manifest
AddType text/cache-manifest .manifest

For preloader good idea use http://fgnass.github.io/spin.js/

bnjmnt4n commented 8 years ago

Closing this at reveal.js already supports lazy loading of images and iframes.

benjaminpick commented 8 years ago

I beg to differ - preloading and lazy loading is not the same use case.

In our case, the presentation is run on a public touchscreen, so we wanted to load all images & videos to load at the beginning, not while the user is navigating in it. Yet, the user can also start a new presentation so he shouldn't be confronted with a ugly screen (seems broken) but some kind of loading indicator.

hakimel commented 8 years ago

That's right – this issue was for adding a preloader while content is still being loaded (lazily or otherwise) to prevent anyone from ever seeing a half-loaded presentation. Reopening.

bnjmnt4n commented 8 years ago

Ah sorry, I kinda misunderstood the original point of this issue :'(

G1305 commented 6 years ago

image

how to fix responsive dimensions for mobile devices?

mschilli87 commented 6 years ago

@G1305: It is totally sufficient to ask your question once (see https://github.com/hakimel/reveal.js/issues/310#issuecomment-352345832, https://github.com/hakimel/reveal.js/issues/1365#issuecomment-352187656, https://github.com/hakimel/reveal.js/issues/1784#issuecomment-352186111). Please keep in mind that 1.5k people get notified if you post here.

ghost commented 5 years ago

Hi, I have embedded inline CSS animations to my SVG and then inserted them into my html like this: <img data-src="pres-assets/svg/img.svg"/> however my animations are running beforehand while the slide is set to display:none with viewDistance: 5

Is there a workaround to load images ONLY when the slide is set to.present ?

Khlick commented 3 weeks ago

Hi All, I see this is a really old topic at this point, and I came across this looking for a preloader or splash screen for myself. Not being able to easily find one, I just wrote a plugin myself. Working on Revealjs 5.1.0, I wrote a simple plugin that displays a "splash screen" upon initialization, and then set's a callback to remove the elements from the document when Revealjs triggers the 'ready' event. There're some options for text, image, color, etc., to spruce it up a bit. Further, it may be configured to show for a minimum duration regardless of load time. Anyway, the plugin is reveal-splash.

I should note, this isn't doing any loading (which is what I would think a "preloader" does) so there's not really a way to show a progress bar from this plugin. But you can mask the presentation until Reveal emits the "ready" event, or for a configurable minimum duration. You could achieve the same thing if you create a div to mask the presentation before initializing Reveal, then using the Promise returned by the initialize() method to .then() remove it.

The real solution would be to optimize your assets for the situation, but I don't do that either, so I get it.

I don't really see the value in making this a core feature of Revealjs, as I suspect most use cases wouldn't need it. Where this might be highly useful is if you have another plugin that parses a lot of the slide contents, which is really my case.