Virtual List with Expandable card containing a swiper gallery, jump effect showing when updated

1

Hi Vladimir,

After long testing the virtual lists with expandable cards with dynamic content I have come to some conclusions:

Because the expandable card use a cover image to show as a preview image when opened and closed, and it is always the same image…

and we needed to show an image gallery when the expandable card is opened…

I needed to hide the cover image and replace it with a swiper gallery when card:beforeopen event is trigger… and I set also the observer parameter of the swiper and html to TRUE.

Then the swiper gallery is opened with three slide images that it will updated once the Ajax call finishing loading the rest of images… this happens also when card:beforeopen event is trigger.

Anyway the card is opened instantly not waiting the the Ajax call to finish loading all the rest of images missing in the json.

After the Ajax call response is finished, the json is updated with $setState…

here the video link showing the problem:

https://mega.nz/#!QRRUEIyC!RpZ2KRvwK8ITqOzw51W7ENzRNOONoUahF_NKg-Rnzbg

ISSUE

A jump effect showing that the images slides has been changed or updated is clearly shown even if we made use of the setting observer to true for the swiper gallery…

this occurs when Ajax finishes loading more images and $setState change the object data for the images.

I guess the observer to true it is not working properly inside the virtual list or does not work properly inside the expandable card too.

1 - is there a way to fix this issue with the observer to true ?

or

2 - is there a way to avoid opening the card when card:beforeopen event is trigger and wait better Ajax to finish loading the rest of images so I do not need to refresh the slides once the card is opened and avoid this jump effect?

I will also appreciate your reply regarding this maybe you have some quick solutions for this to work properly.

Thanks a lot again Vladimir

2

Hey @rapgithub

I can not see any “jumping” effect on your video. Do you mean the image kind of “flickering” when swiper loads? But this is default browser behavior, it needs time to load image. It can be avoided by, for example, converting images to base64/dataUri and use it on swiper images.

You need to call e.detail.prevent() to prevent it from opening:

$('.some-card').on('card:beforeopen', function (e) {
  if (/*not loaded*/) {
    e.detail.prevent();
    // load data
    // and open card
    app.card.open('.some-card');
  }
});
3

the image flicking effect or jumping effect it is produced sometimes when opening the expandable cards where the swiper gallery is with three images by default… then

the Ajax call is calling for more images after clicking the card… some part of the code below:

$(document).on('card:beforeopen', '.card', function(el, prevent) {
...
              app.request({
                headers: {
                  'Authorization': token,
                },
                url: app.data.path.get_hotel_overview,
                dataType: "json",
                async: true,
                method: 'POST',
                cache: false,
                tryCount: 0, //starting request,,,
                retryLimit: 5, //no of retries...
                timeout: 45000, //must set so it doesnt request forever, between trials...
                data: data,
                crossDomain: true,
                statusCode: {
                  404: function(xhr) {
                    console.log('not found');
                  },
                  500: function(xhr) {
                    console.log('syntax error!');
                  }
                },
                beforeOpen: function(xhr, parameters) {
                  console.log('beforeOpen');
                },
                beforeSend: function(xhr, parameters) {
                  console.log('beforeSend');
                },
                complete: function() {
                  console.log('complete');
                },
                success: function(_overview) {
                  console.log('_overview');
                  console.log(_overview);

                    setTimeout(function() {
                      self.$setState({
                        overview: [_overview],
                      });
                    }, 100);
...
});

the best thing will be that the observer to true works inside the expandable card not allowing the user to see that something changed, or update only the slides that are not equal… after the three image and on…

I will try to use e.detail.prevent(); to see if I can delay the card to open but the idea willl be that I can open the card and see instantly the card opened with the three images by default using the swiper while on the background all the rest of images are finishing loading and then updating without the user noticing it… observer to true works fine outside expandable cards in my case.

is there a better way to do it?

or better the expandable card to have a way to change the default image into a swiper gallery when opened by default will be great addition to the expandable card methods.

In my case I cannot convert to images to base64/dataUri because the are received by an external API in the form of a url address not as base64/dataUri…

thanks Vladimir for any other ideas if you have some other solution!
thanks again!

4

You can https://davidwalsh.name/convert-image-data-uri-javascript

5

I just want to open the card instantly and show the swiper gallery with the three images by default while still loading the rest… and the user not noticing it.

I will try to use that script!

Do you think that this will work to avoid that problem ?

In my case the three default images are in the same order when finishing loading the rest of images that are around 40-50 more images for every hotel… but the three first images are the same in the same order for the 40-50 set…

My idea about this problem maybe to solve it will be that swiper when updating the slides can append at the end of the swiper gallery only the new ones and skip the first ones I want to skip so they are not reloaded again…

but I do not know if swiper can do this…

I will see if your solution can avoid this issue…
Keep you posted!
thanks