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

not working in silder #177

Closed ducvu91 closed 3 years ago

ducvu91 commented 5 years ago

Hello, i use your library, it awesome. Thanks. But i'm have a few problem with slider. in silder i have 10 image, it only load 2 image can show be cause silder only show 2 per page, i click next or back slider, it still not show image, but when i scroll up and down, it show 2 image continue. you can see demo below link, with image 4 i had scroll up and down. https://photos.app.goo.gl/6tPKZY6rGw9Smn7g9

lems3 commented 4 years ago

I have the same issue, the library won't load images that are outside the viewport, and won't trigger outside a scroll event.

Being able to manually trigger an image load would fix this, since we could all implement it in our own custom solutions for slideshows...

EDIT : Turns out that feature is already in the library, it just was not 100% clear how to use it.

The Blazy.load() function can take two arguments :

Give Blazy your image, and give it "true" for the boolean, and it will load your images.

So what we did is that we just scan our slideshow before animating it, and load any images in it. So, on page load, only the visible images are loaded, and as soon as you interact with it we load the rest.

dinbror commented 3 years ago

@ducvu91 @lems3 Many sliders has events like beforeSlide and afterSlide where you need to call either load or revalidate (https://dinbror.dk/blog/blazy/?ref=github#Functions). Blazy is only listening on scroll/resize event