Comments (4)
I had a use case where I had some 50 slides, all with heavy images in background and foreground along with some iframes hosted on in a website. The total size of all images was around 39 Mb, so i needed some form of lazy load.
I made a small plugin to lazy load the images using [be]lazy.js (http://dinbror.dk/blazy/)
<script type="text/javascript" src="js/blazy.js"></script>
<script type="text/javascript">
// Start Blazy before Webslides
window.bLazy = new Blazy({ loadInvisible: false });
// Plugin will be constructed at this time and it will receive the webslides instance.
class bLazyPlugin {
constructor(wsInstance) {
wsInstance.el.addEventListener('ws:slide-change', bLazyPlugin.onSectionEnabled_);
}
// The lazy loading parts of the next slide will be loaded
static onSectionEnabled_(event) {
// Get all the DOM elements with class b-lazy in the next slide
var slidedom = document.querySelectorAll("#section-" + (event.detail.currentSlide + 1) + " .b-lazy");
// Force Blazy to load all the lazy loading parts of next slide
bLazy.load( slidedom, true);
}
}
// Adding the plugin to WebSlides
WebSlides.registerPlugin('bLazy', bLazyPlugin);
// Starting WebSlides
window.ws = new WebSlides();
</script>
Hope this helps someone.
from webslides.
We are working on it. Thanks, Pieter :)
from webslides.
@pcmill we've discussed this a bit and I wanted to get your opinion too. I don't see how lazyloading helps to speed up the application since stuff will be loading anyway. JavaScript should be quick to arrive and once it executes it will make the things work, although images and stuff might not be there yet, it won't matter.
How would it benefit from lazyloading then?
The way I see lazyloading benefits a page so DOM is ready early and then additional content starts loading in parallel so the text and styles are already there. However, in this case, you need all the things there in order to actually do the presentation. You don't want to start sliding and stuff still be coming in, right?
Please let me know if there's anything I've missed here.
from webslides.
Closing this although up to be reopened if we get valid usecases.
from webslides.
Related Issues (20)
- Url Hash customization (#slide)
- some youtube videos in demos not found - stops show on android
- fadeIn animation not executed more than once per slide in Safari
- How to get 'ws:slide-change' HOT 4
- prevent reloading of iframes content
- shanel HOT 3
- font awesome is broken in the demos HOT 1
- How to give the footer text a dim color
- How to add a functioning carousel indicator component?
- Quartz is no longer supporting Atlas for integrating charts
- Support for D3.js? HOT 1
- stop navigation on end HOT 3
- Youtube video and autoload HOT 1
- How to disable keyboard navigation via API? HOT 1
- Animated background gets lost if article has vertical class
- Load slides from external HTML files
- issue accidentally opened, sorry.
- Slide index doesn't work on mobile?
- Can I both slide horizontally and slide vertically in one project? HOT 6
- how disable either keydown or keyup
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from webslides.