swiper

swiper copied to clipboard

Check that this is really a bug

• [X] I confirm

Reproduction link

https://jsfiddle.net/6yrhuze0/5/

Bug description

When using lazyload + auto height the height of first page load is wrong.

I try to use solution as suggested here https://github.com/nolimits4web/swiper/issues/2732#issuecomment-854542091 but it's working only by setting a setTimeout with more than 300ms:

        on: {
            lazyImageReady: function (swiper) {
              console.log('lazyimage is ready 1')
              swiper.updateAutoHeight()
              setTimeout(function () {
                console.log('lazyimage is ready 2')
                swiper.updateAutoHeight()
              }, 0)
            }
          },

Expected Behavior

The height is correctly set on first page load.

Actual Behavior

The height is set like there is not image.

Swiper version

8

Platform/Target and Browser Versions

Firefox iOS

Validations

• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• [X] Make sure this is a Swiper issue and not a framework-specific issue

Would you like to open a PR for this bug?

• [ ] I'm willing to open a PR

This seem to work:

       on: {
           
            lazyImageReady: function (swiper, slide, img) {
              if (img.complete) {
                  swiper.update();
              } else {
                  img.addEventListener('load', function () {
                      swiper.update();
                  });
              }
            }

      }

Demo: https://jsfiddle.net/6yrhuze0/6/

Not sure if this is the best solution.

I have the same issue with Angular and safari only. Chrome is not the problem, I think it is safari issue?

Issue is closed because of outdated/irrelevant/not actual/needed more information/inactivity.

If this issue is still actual and reproducible for latest version of Swiper, please create new issue and fill the issue template correctly:

• Clearly describe the issue including steps to reproduce when it is a bug.
• Make sure you fill in the earliest version that you know has the issue.
• Provide live link or JSFiddle/Codepen or website with issue