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:
-
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.
-
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.
-
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
