search

dinbror / blazy

Hey, be lazy! bLazy.JS is a lightweight pure JavaScript script for lazy loading and multi-serving images. It's working in all modern browsers including IE7+.
http://dinbror.dk/blazy
MIT License
2.63k stars 355 forks source link

Is it possible to Blazy have an option function to run when all images has been succesfully loaded? #149

Open rapgithub opened 7 years ago

rapgithub commented 7 years ago

I mean when using Blazy with a slideshow that every click display:block next slide the issue that I see that if I use the success: to include a display:none; a spinner when the image has finished loaded is working fine until the Blazy does not run anymore success: when finished all images as loaded... in this case I will like to keep my spinner working while going next or previous after all images has been loaded but there is no a control or function for this that can run after all images has been loaded with blazy...

any ideas or solution? also why bLazy.revalidate(); is not working in my case? why am i doing wrong?

Here my Blazy options: var bLazy = new Blazy({ success: function(ele){ console.log("Element loaded: ", ele.nodeName); setTimeout(function(){ var loader = document.querySelector('.spinner'); loader.style.display = 'none'; var active = document.querySelector(' .active'); active.style.display = 'block'; }, 700); }, }); bLazy.revalidate();

Here what I think it will be nice Blazy to have as extra options maybe with onloaded options to control when all images has been loaded...

var bLazy = new Blazy({ success: function(ele){ console.log("Element loaded: ", ele.nodeName); setTimeout(function(){ var loader = document.querySelector('.spinner'); loader.style.display = 'none'; var active = document.querySelector(' .vanilla-active'); active.style.display = 'block'; }, 700); }, onloaded: function(ele){ console.log("All Elements loaded: "); });

tkosse commented 7 years ago

Normally I would say set the spinner on all elements with the class b-lazy and remove it when b-loaded is added. In your case you could use the success function: Select all elements with the class b-lazy and select all with the class b-loaded. If the number of elements with class b-lazy matches the number of elements with the class b-loaded (and b-error), all images have been loaded.

If you want to implement a proper solution you need to specify a container element. When all elements in this container were loaded you can execute the allElementsLoaded function. As a first clue you could have a look at my repo. I have implemented a function where you can specify container element where all children of this element get loaded, but at once. When all elements in this container were loaded the success function is executed.