Image load in the background?

@mark i have an app where images is stored in cloudinary. Is there a way to load the images in the background so they are to show up without lag when they are to be presented? Or present all images in an inline list so they are all loaded. I’m doing that already actually but with 3 horizontal images at each row resulting in small images. I expect that the images are compressed for this view and therefore will not be available for the image component.

I have at present approx 400 images in the app but could go to 5000. The images are put in an image component.

You mean for the app to preload the images and store them on the user’s device?

We don’t have anything like that yet.

1 Like

@mark that was something like that, I meant. Any way to make the images load quicker - looking for suggestions.

I am trying to get this figured out now as images (even 350kb ones) can take a while to load (even on decent wifi).

Any update @Mark ? Thanks!

1 Like

How would it work on the device if:…
the user start using the app…
they get to a screen where they need to type a few things in… be busy…
can I then have the images in the row in the sheet… but hidden by visibility?
And then are they in the cache to load faster?

Thanks!

Are images stored in Glide or somewhere else?
I think this should go to the feature request topic?

The URL for uploaded images and files is appspot - and appspot.com is the Google Cloud infrastructure.
For me it is whether the images can be put in the cache early in the user process, so it is superfast later.

1 Like

Got it, I understand.
Maybe add it to the features request topic, since Glide doesn’t do that currently.

@Mark_Turrell cache early/lazy cache etc.
The challenge I think is for the glide app to find which images to cache at what stage.
And also how long time the images can be cached - offline functionality would help a lot I think

1 Like

my app has Row Owners… which means I do not really do lots of lookups in the app later, instead pulling everything into the CollectUser (profiles) sheet… for each person. I have 100+ columns as single values for strings, I pull in all the images I need, etc.

This allows me to always pull in User values wherever I want in the app.

And if Glide is caching images, potentially I am actually pulling them all in immediately anyway (maybe!)

1 Like

@mark Do you know if there is any news regarding the preloading of the images, or some tricks to achieve the purpose of loading images superfast on the screen?

I decided to reduce the file size of images so that they are a lot faster to load normally. That helped a lot, so I have had fewer issues. I did have a hidden inline list component with images on an onboarding screen… but I could never tell in the end if it was faster or not, so I took it out.

1 Like

Perhaps it is possible to integrate a preloading technique with CSS. I’ll experience it today and if it works I’ll let you know.

2 Likes

Preloading images would probably need to be something you tell Glide about explicitly. There are too many edge cases for us to accurately detect which images need to be preloaded for most/all users. Image preloads work best when they are placed into the initial HTML bundle. At this time we don’t have anything to comment on when or if this will be implemented.

2 Likes

Thanks for your point Jason.

The idea, although not perfectly effective, was to define, in a rich text component, a div tag to apply an ::after pseudo element, for example like this:

<div class="myTest"></div>

<pre><span><style>

.myTest::after{
   position:absolute; width:0; height:0; overflow:hidden; z-index:-1; // hide images
   content:url(image1.jpg) url(image2.jpg);   // load images
}

</style></span></pre>

If it worked, in a presentation detail screen, I could first preload the photos, and then after a preset wait, make them appear all together, on the same screen of course.

But it doesn’t seem to work… :slight_smile:

:person_shrugging: :ok_man: And oh well … it doesn’t matter, I tried!

1 Like