How can I do “on demanded” loading images 10 by 10 when scrolling?

Hi guys, my app have over 500 objects… Its impossible load all objects, it’s possible load only 10 and when the user go to the final from this 10 objects load others 10 until the end?
Thanks =)

Yes, it is possible, but you will have to program how it will perform this.

Those pesky images take up a lot of ram when using clone block. @actech pointed this out to me. Clone is not a substitute for lists. I have had bad luck with cloning images.

My solution is to have a next page button. Since your images are small, you could lower the quality of them to fit more in one page. So for 500 items, have 10 pages, each page has 50 items.

1 Like

so how to start?

I just want when it gets to 9 option it will load the next 10 …

@eoinparkinson
I prefer not to do it for pages … I prefer something like facebook or instagram … if possible of curse…
Should you be able to create an image equal to each option on the image above?
It has image, the name of the object, 1 to 5 characteristics of the object and finally a rating of the object … if it is possible to create a list for this I even consider using lists …

You have all your objects defined, and when the page is scrolled, you de-associate the objects that are “past” and associate the next one. The challenge is making appear smooth, if this is what you insist. But if you do not object to a “chunky” scroll, you simply drop object#1 from the top most visible and associate object#2 to it. Object#2 that was shown as position 2 is replaced by object#3, with position 3 now showing object#4 and so on.
If you want to make it look smooth, you need to have more position than are shown at any time on the screen and capture the end of the scroll action, when you un-scroll the page and replace all the objects with those that would have come into view.

Didn’t say it would be easy. But it can be done.

1 Like

:thinking: how do you plan on detecting which way and when the page is scrolled.

@CBVG
WHAAAAAAAAAAATTT?

have you ever done something like this? Do you have a project with this “system”?

@eoinparkinson
please answer my question

I think the easiest and probably best option atm is to add a “load more” button that will redothe cloning for another n number of items of the list adding the clones to the ones already made, but if Aectech said there is a ram problem I trust him,mybe you can limit the items per page to 50 and reaload a new one when at the end, always with the load more button

2 Likes

No, but if I had to, that is how I would do it.

1 Like

Of curse @actech is one of the best thunker from here, he helped me a lot!^
But i think this method is the best way to me… wanted to create something the same way as instagram… but on second thought, I think I’ll try to create a website where I make these app images and the app just uploads the ready-made images …

@Yukold now that I think of it, you could have locally loaded HTML, then for i in length of list, add photos and buttons? Of course I am useless with HTML but you could find a way to get which button clicked.

Alternatively, just load the photos into the website, I have had a Google Sites website with about 1000 24MP photos in it, in web viewer. Thats pretty darn high quality. And if cloning 50 low quality images slows down a device due to ram capacity, I wonder if the picture was loaded in a web viewer would this be effected? You could have 500 web viewers with 500 buttons below each?

That is only a weird idea, I know nothing about how websites work :slight_smile:

p.s.

To anybody looking for a simple solution to displaying a lot of photographs in your app nicely, check out https://sites.google.com

They removed their branding at the bottom, so now it can be a great alternative to a photo viewer :slight_smile:

1 Like

Hello to all,

I want to clarify one point. It is more correct to say that for the Thunkable X platform this operation of copying components is very expensive in terms of cost of shared resources (and not just because of the capacity of RAM).

@eoinparkinson correctly says that using HTML, such a task can be solved much easier and everything will work faster, because other mechanisms are available there - virtual lists, asynchronous data loading, sprites, tracking scroll position and more.

2 Likes

Do you mean web viewer when you say HTML?

Web viewer is only way of implementing HTML or the like into an app made with Thunkable X

I don’t understand

I am not the best with website knowledge, but from what I know, most websites use html as a way to show design of a website. so place a photo here, a button there. you get me. then something like JavaScript or CSS will take over in the background? I think CSS does style though.

web viewer anyway will retrieve this code from the web server and display it as it should be shown. so instead of the web viewer retrieving the html etc, you just give it to it, in app.

Web viewer is a way of seeing a file similar to those used in web sites. But there is nothing that says the web page has to be in the internet, you can load a file that is part of your app, and distributed as one of your app file assets.

The file the web viewer would load would be an HTML file, so would describe fields and components, including buttons; it can also include JavaScript code that would process the information entered in that web file.
The only thing that is missing in X (but present in Classic) is that the web page cannot communicate back to the Thunkable program, as it is lacking a webview string element (I still do not understand why this vital link was overlooked).

2 Likes

so the best way to have an app compared to what I intend to do is to have a web page of it and the app would just be another way to interact with the site …

I don’t know, it sounds so complicated … I think I’ll keep trying on my project here on thunkable for now, I will create that way to see 10 items at a time = (

As @CBVG implies, the standard way to do this sort of thing is to have more control of the image loading process and the scrolling behavior. Since Thunkable is designed more for the beginning app developer we have chosen to optimize for simplicity, rather than performance, in many cases and this is one of them. That said, we could potentially provide a little more advanced functionality like this, as long as providing that functionality doesn’t make life harder for the less experienced users.

On a related front, we are working on a more “interesting” and powerful type of data viewer which is also simple to configure for most users and which may be useful for some of these use-cases.

-Mark

@Yukold I was wondering how you create the UI in your first post of this topic. It is not the list viewer I suppose do you generate rows for each item and show the image and information (labels) in a column?

1 Like