question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

loadOnTransitionStart doesn't work

See original GitHub issue

const params = { pagination: { el: '.swiper-pagination', type: 'bullets', clickable: true, dynamicBullets: true }, slidesPerView: 1, loop: true, preloadImages: false, lazy: { enabled: true, loadOnTransitionStart: true } };

We need the image to start loading as soon as the swipe begins rather than waiting for the blur event. This property doesn’t seem to be working however! Still only lazy loads on blur.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:9 (3 by maintainers)

github_iconTop GitHub Comments

3reactions
kidjp85commented, Mar 10, 2018

Hi @joe-f , sorry for my late reply cause I am so busy recently. I found one solution for u.

params = {
    lazy: {
       loadPrevNext: true,
       loadPrevNextAmount: 1,  // number of slides u wanna preload on transition start
       loadOnTransitionStart: true
   }
}
0reactions
AndreasCagcommented, Apr 3, 2018

Actually, it doesn’t. @kidjp85 's solution just do this:

  • when you start transition to next slide, swiper loads content on left and right sides of this slide, instead of loading content on left and right sides only if transition is ended.

But issue question relates to another possibility: lazy load slide image only when user tries to swipe to this slide.

Read more comments on GitHub >

github_iconTop Results From Across the Web

react native - What am i doing wrong with this stack navigator?
The issue I'm having is that the stack navigator doesn't navigate. ... originating screen) * onTransitionStart` (on the stack transition).
Read more >
Swiper API
Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.
Read more >
Animation Add-Ons - React
The ReactTransitionGroup add-on component is a low-level API for animation, and ReactCSSTransitionGroup is an add-on component for easily implementing basic CSS ...
Read more >
Transitioner - React Navigation
Transitioner is a React component that helps manage transitions for complex animated components. It manages the timing of animations and keeps track of...
Read more >
Element: transitionstart event - Web APIs - MDN Web Docs
If the transition doesn't run on a pseudo-element but on the element, ... The same, but using the ontransitionstart property instead of ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found