Virtual list as a list of images when setting createUl:false does not work properly with any other block elements ... :( any ideas or a bug?


#1

I create a list of images cards using virtual list, my virtual list it is a list of images, in this case hotel images loaded with lazy loading with its name and brief information that is over the image, when I click the images I open a new page and load all the rest of the hotel information…

My json of hotels is around 4-8 mbytes maximum…
I was advised to use virtual list for this but there are lot of issues I am having…

Problem!

In the virtual list I am having lot of problems:

  1. When scrolling up or down the images are redrawn all the time and the position of the hotel I am seeing on the viewport after scrolling and stopping changes to another hotel of the list.

  2. If I select one hotel for the list to view its details andI go to the next page, and then go back the hotel I clicked it is not there anymore when back, it is changed to another position of the list.

  3. If I scroll down faster to the bottom sometimes the lazy images stop loading and does not load image anymore even if there are many other images on the list to load…

How to fix all this issues?

  • I tried to modify all the lazy image options but it does not help this issues.
  • I set cache: true or false in the virtual list settings and these problems are still there…

I ended up thinking it is a bug in the virtual list that cannot manage bunch of images in a list but using only text (name of the hotels) in the virtual list the position of the items also change when scrolling up and down and stops or returning back to the list from a page… after trying for more then a week many settings options the problem still the same…

Any help how to make virtual list to work properly with a list of images and avoid virtual list to change the position fo the items all the time when scrolling up or down or when returning from next page to the virtual list again?

I will appreciate any help I think it is a bug! I found no solutions so far…
thanks

here the videos I make showing the problem:

a ) Hotel image position changes when scrolling up and down or when returning from a next page to the virtual list again:

https://mega.nz/#!hQJHhACB!Y-31rceCqHXOatDyjA2jYGds6lgl3vsrs0O9c7sifGA

b) Hotel image redrawn all the time scrolling up and down and scrolling faster to the bottom stops loading the rest of the items with images…

https://mega.nz/#!MVQRnIgI!0RW-LX9ekrg-70_GhG-8ohLusNla8wncuR0A8RrQ0yk

I think if these thins can be fixed if there is bug then it will fix many issues using the virtual list for a list of images or expandable cards that I had same issues and I thought it were the expandable cards but not…

code:

<div class="hotels-list virtual-list"></div>
<script>
  return {
    data: function() {

       var lastItem = app.data.hotels_length;

      var items = [];
      var hotels = app.data.hotels.hotels;

      for (var i = 0; i <= lastItem; i++) {

        items.push({
          id: app.data.hotels.hotels[i].id,
          name: app.data.hotels.hotels[i].name,
          star: app.data.hotels.hotels[i].star,
          image: app.data.hotels.hotels[i].images[0].url,
        });
      }
      return {
        items: items,
        lang: app.data.language
      };
    },
...


      pageInit: function() {
        var self = this;

        self.virtualList = self.$app.virtualList.create({
          // List Element
          el: self.$el.find('.virtual-list'),
          createUl: false,
          cache: false,
          items: self.items,
          itemTemplate:
                '<div ref-hotel="{{../id}}" class="hotel-card lazy demo-lazy" data-background="{{image}}">'+
                '</div>',
          // Item height
          height: 240,
        });


        $(document).on("click", ".hotel-card", function(e) {

          app.views.main.router.navigate("/hotel-details/" + _ref_hotel + "/", {
            reloadCurrent: false,
            pushState: false,
            context: {}
          });

        });


I will appreciate any help to solve this things…
thanks


#2

I think I found some reasons why the virtual list does not work properly when you try to use items that are not contained inside an unordered list < ul >< li >< /li >< /ul >

in my case I needed a list of cards or expandable cards contained inside a < div > so I used the setting:

createUl: false,

so I do not create a

<ul><li></li></ul> 

structure but I create my own… the problem when you want to create my own list using virtual list it is that every item inside the virtual list even if you set createUl: false it seems it must be contained inside the tag < li > to work and be searchable and also for positioning in the list when scrolling up and down or returning from another page to the list…

in my case I set the createUl: false, because I needed to create my own list without using unordered list but It seems this setting does not work properly for this :frowning:

createUl: false,

so ended up to this conclusion, virtual list items needs to be contained inside an unordered list anyway…

so why is this setting for:

createUl: false,

I wonder now, is there a way to create a virtual list without having to use an unordered list and be searchable as well? let us say I want to use < div > instead of < ul >< li >< /li >< /ul > for my items…

is that possible?

I think it will be helpful framework7 must have the posibility to create any type of list like a virtual list but more flexible in the settings to use your own list with any html tags, this will also help to create expandable cards, cards or any list with ease…

I think there is a bug here, when you use your own containers for the list using < div > instead of an unordered list then when you scroll down the list the items to be loaded are not being loaded anymore at the end and you ended up with a white screen and nothing loading :frowning: also the position of the items changes all the time when scrolling up and down or also when returning to the list from another page…

any solution?
thanks


#3

With createUl: false it doesn’t expect ul>li structure and succesfully works with custom elements. If it doesn’t would be good to see minimal JSFiddle with the issue.

If I select one hotel for the list to view its details andI go to the next page, and then go back the hotel I clicked it is not there anymore when back, it is changed to another position of the list.

Because page with Virtual List got removed from DOM i guess. Enable domCache if you need to keep in dom. Or manually store VL scroll position and then call its vl.scrollToItem() method on page load to restore scrolling.

If I scroll down faster to the bottom sometimes the lazy images stop loading and does not load image anymore even if there are many other images on the list to load…

Check the network tab in browser. Maybe there is some issue


#4

Hi Vladimir,

In the network tab in browser there is no issues whatsoever! I will send you a link to the code samples in the next message, but the images stop working and loading when you use any other html elements than < UL > < IL > with createUl set to false …

thanks for taking care…

here the link to the tests:
Virtual List Samples


#5

Looks like the link you provided is empty


#6

it is weird but I will upload them again maybe it is hidden to the public view thanks for letting me know!

uploading them again!


#7

I just uploaded the sample again and now It can be public and visible www.zip with the sample…

the structure I created :

One using createUl: false and with DIV and the other with createUl: true and UL LI structure…

As you can see I take out the lazy loading fade in effect of the image loading because it makes the behaviour of the images to be flicking at some point, with the DIV structure without UL LI the bottom of the scroller shows always a long empty space at the bottom and not all the hotels are loaded and there are missing a lot of hotels that supposed to be displayed at the bottom of the virtual list when scrolling down… but they are not…

with the UL LI structure the space at the bottom is not created but the hotels images has the same issue as above, and not all hotels are being loaded at the end when scrolling down…

I created the hotel details page so you can see the effect when returning to the page… with expandable cards the problem is more evident when returning back but these samples of virtual list I decided to take out the expandable cards because of the behaviour that was not good.

I will be happy if you can find the bug of the virtual list maybe this can fix also the problem with the expandable cards as well.
thanks Vladimir!

LINK


#8

In order for Lazy to work correctly with VL, you need to set lazy.observer = false app parameter:

var app = new Framework7({
  lazy: {
    sequential: false,
    placeholder: 'asset/images/patterns/lazy.svg',
    observer: false,
  },
  ...

When using with custom items when createUl: false, you need to make the element that rendered as VL Item with position: relative, so adding it to your render function will make it work:

self.virtualList = self.$app.virtualList.create({
  ...
  itemTemplate:
  '<div style="position:relative">'+
    '<div ref-hotel="{{../id}}" class="hotel-card lazy demo-lazy three-images" data-background="{{image}}" style="background:#000;background-size: cover; height: 240px;margin-left:5px;margin-right:5px;margin-top:8px;margin-bottom:8px;border-radius: 5px;">{{name}} / {{star}}</div>'+
  '</div>',
  ...
});

#9

But to be honest there is no too much sense and profit of using VL with lazy loading - you already has Virtual List, which will prevent whole list of images from loading


#10

Thanks Vladimir for your reply!

The real problem was probably dealing with the large amount of cards in the virtual list and at the end of the list the hotel cards were not loading in total and leaving this empty space at the end when scrolling down…

I will try with this settings to see if this can work and solve the problem… yes lazy loading I used it only for the images to load them using this way:

<img data-src="https://cdn.framework7.io/placeholder/nature-500x500-1.jpg" width="1500" height="1500" class="lazy lazy-fade-in demo-lazy"/>

Every card in my virtual list has one image and this is why I put the class lazy for the images load lazy… but I have problems anyway when scrolling down with this setting making everything to jump…

I will try the position: relative maybe this can help to solve the issue and set the observer: false for lazy images…

let you know if working after all these tests!
thanks again and keep you posted

Best regards


#11

Hi Vladimir,

I found some things, using the lazy loading to load images when scrolling down the VL works with the settings you suggested, these means all images are loaded when scrolling down and all hotels too…

…but I see another thing maybe a bug, if you search the list for a name that is still in the middle or at the bottom of the VL and image not still loaded because I did not scroll to that item, the it is displayed and searched but the image does not load when using the search… this for items whom images are not loaded yet because I did not scroll down yet…

If the images is already loaded when scrolling down, not problem but when the item is search and the image not yet loaded it cannot load image after searched here the screenshot…

so I opted out not using anymore lazy load for the images in the VL to load them because all of these things… but include them like this:

itemTemplate:
'<div style="position:relative;height:240px">'+
 '<div ref-hotel="{{id}}" class="hotel-card" style="background-image: url({{image}}); background-color: rgb(0, 0, 0); background-size: cover; height: 240px; margin: 8px 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; background-position: initial initial; background-repeat: initial initial;">'+

I do not know if there is a way to make images unload and load properly using virtual list with the use of lazy or without it but it will be nice to find some solutions in case the list of images it is long to keep all images loaded properly without memory issues at the end…

Also it will be nice too see if there is a way to show a preloader before image is completely loaded in the VL… this means knowing when the item is still loading and when completely loaded in the VL so I can show something in between…

Any ideas
big thanks!