search

metafizzy / flickity

:leaves: Touch, responsive, flickable carousels
https://flickity.metafizzy.co
7.52k stars 605 forks source link

Lazyload & Height Adjust don't work particularly well together. #933

Closed aaronstezycki closed 5 years ago

aaronstezycki commented 5 years ago

When using Lazyload and Height Adjust, slide images that haven't loaded end up having a cell height of 0. This animates (if there is a height animation) the slider to 0 height, and when the image is loaded then animates the height to that of the loaded image. This is not a desirable outcome.

In the past, this has been fixed with setting the lazyload to 2/3 so that the next set of images that are swiped loads the next images in the set. Where there is a thumbnail gallery, and a user is able to select an image further down the pipeline, it creates this issue.

Could the slider keep the height of the current selected slide, until the selected slides image loads correctly, then change the height of the slider to match that of the current slide.

Test Case: https://codepen.io/aaron-stez/pen/YMQRPK

desandro commented 5 years ago

Thanks for reporting this issue.

One solution is to set a min-height with CSS

.c-slider__item {
  min-height: 100px;
}

Another solution is to increase lazyLoad to 2 or more so the 2nd adjacent cell is loading.

lazyLoad: 2

Could the slider keep the height of the current selected slide, until the selected slides image loads correctly, then change the height of the slider to match that of the current slide.

For this kind of specific code, I recommend you develop your own custom solution. Take a look at the lazyload source code for a start.

aaronstezycki commented 5 years ago

Placing a min-height doesn't really fix the issue, as the image height and width can be any size, we don't know what images are going to be used within the slider. The image size could be any height, and any width ... thats the entire point of height adjust. Setting a min height could render not enough height to contain an image, or too little.

Also, as I explained before, setting the lazyload to 2 doesn't fix this issue, because if you use "dots" or a custom nav to browse images further in the gallery, (i.e. not the next 2 images in the gallery that are preloaded) it takes time to load the clicked image into the viewport which means the slider takes on a height of 0.

This is a problem with Flickity setting the height inline-style to the current height of the selected cell, but if there is no image, there is no height. This isn't great UX, as mentioned before could you not code Flickity to apply the height change after an image is loaded and not before ? This means the height of the previous cell is maintained, and there is no jarring animation in-between selecting images that are further in the gallery?

Is there a possible duck-punch solution to maintain height of a sliders cell, until the next image has lazy loaded?

desandro commented 5 years ago

Sorry I won't be able to personally provide a custom solution