Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
rapgithub opened this issue Jul 31, 2017 · 1 comment

Comments

@rapgithub
Copy link

rapgithub commented Jul 31, 2017

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: ");
});

@rapgithub rapgithub changed the title Is it possible to Blazy have a function when all images has been succesfully loaded? Is it possible to Blazy have an option function to run when all images has been succesfully loaded? Jul 31, 2017
@tkosse
Copy link

tkosse commented Aug 15, 2017

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants