You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
When using swiper element with init="false" attribute, if swiper initialization is postponed, so that images are loaded before swiper initialization, lazyPreloader won't get processed inside swiper-slide elements.
Bug probably lies in lines 3479 - 3487 in the file swiper-core.mjs: [...swiper.el.querySelectorAll('[loading="lazy"]')].forEach(imageEl => { if (imageEl.complete) { processLazyPreloader(swiper, imageEl); } else { imageEl.addEventListener('load', e => { processLazyPreloader(swiper, e.target); }); } });
querySelectorAll is ran against swiper.el element, which is shadow dom element in case of swiper element. querySelectorAll can't find any '[loading="lazy"]' elements, because these are put inside swiper-slide elements, which are slotted inside shadow dom of swiper-container.
Expected Behavior
Swiper lazy preloader should be removed from swiper-slide elements with parameter lazy="true"
Actual Behavior
Swiper lazy preloader is not removed from swiper-slide elements with parameter lazy="true"
Check that this is really a bug
Reproduction link
https://codesandbox.io/p/sandbox/swiper-lazy-load-images-forked-2jn2dr?file=%2Findex.html%3A1%2C1
Bug description
When using swiper element with init="false" attribute, if swiper initialization is postponed, so that images are loaded before swiper initialization, lazyPreloader won't get processed inside swiper-slide elements.
Bug probably lies in lines 3479 - 3487 in the file swiper-core.mjs:
[...swiper.el.querySelectorAll('[loading="lazy"]')].forEach(imageEl => { if (imageEl.complete) { processLazyPreloader(swiper, imageEl); } else { imageEl.addEventListener('load', e => { processLazyPreloader(swiper, e.target); }); } });
querySelectorAll is ran against swiper.el element, which is shadow dom element in case of swiper element. querySelectorAll can't find any '[loading="lazy"]' elements, because these are put inside swiper-slide elements, which are slotted inside shadow dom of swiper-container.
Expected Behavior
Swiper lazy preloader should be removed from swiper-slide elements with parameter lazy="true"
Actual Behavior
Swiper lazy preloader is not removed from swiper-slide elements with parameter lazy="true"
Swiper version
10.1.0
Platform/Target and Browser Versions
Windows 10, Chrome, Brave, Firefox
Validations
Would you like to open a PR for this bug?
The text was updated successfully, but these errors were encountered: