The issue I am having with expandable cards is that every single expandable card is contained in a list vertically and it is a long list so I am using infinite scrolling to load every single additional card on scrolling…
When opened, the expandable card show dynamic content that is loaded from Ajax request calls…
The problem is that in every single expandable card I have a toolbar that I have to create with a unique id number
tab1-121312
tab2-134312
In this case to avoid that the toolbar and tabs has the same #id when opening another card… and stop working… so in every single tab also the content is dynamically loaded… text and images…
The issue I am having is that after opening and closing a couple of expandable cards the browsing and navigation of the cards start behaving slow heating up the computer when working locally and also in the IOS simulator and then you ended up you cannot open up another card anymore because it is too slow the behavior.
I think the problem is that the loaded content like texts and images loaded inside carousel swiper in one card remains in memory after closing the expandable card.
I used this code below for cleaning up variables but the problem is still there very slow performance and heating up the computer after viewing some cards of the list… I do not know why…
pageInit: function(e, page) {
console.log('pageInit', page);
var self = this;
....
$(document).on('card:close', '.card', function(el) {
//$(".card").on("card:close", function(el) {
console.log("popup:close");
setTimeout(function() {
self.$setState({
tab1content: null,
tab2content: null,
tab3content: null
});
self.swiperTop.destroy();
}, 100);
});
....
So my question is, is there a way to create on the fly when opening the cards all the elements (toolbar tabs) so when closing the cards these elements can be destroyed and then the variables remains empty all the time?
I see autocomplete and calendar has a method to create them like that…
app.calendar.create...
app.autocomplete.create...
is there a method similar to calendar and autocomplete to create those elements on the fly (in this case for a toolbar) so I can create this element only when opening the expandable card and destroy them when card is closed?
thanks for any tips or information