Preload Image(s) while program is loading

Anvil Q&A
1

I have 8 images located in a database and when an end-user selects a specific condition from a drop-down box the an image associated with that condition loads and appears on the home page. The issue is, there is a slight delay after selecting the condition and the image appearing for the first time. Moreover, if the end user were to select the same condition again, that same image now appears instantaneously - no delay. Is there a programatical solution that will “preload” all the images while the program is loading for the first time to prevent the delay in image loading. That way, when the end-user selects the image, it will appear instantaneously the first time; rather than the second time it is selected?

2

If I understand correctly, couldn’t you use the function that normally gets triggered when the user selects from the dropdown, but have it save the images to a variable in the client?

Then when the client selects from the dropdown, you could access items from that variable instead of making a server call (which I assume your are doing to retrieve the images).

If you are able, feel free to share example code if clarification is needed.

3

Code excerpt shown below. Explanation of functions:

The images are called from a database named “images”. self.pbs is the name of the drop down box, the list is shown below…The function plate_boundarys calls the function sel_boundary_condition which pulls the image from the server based on the clients selection from the drop down box (self.pbs.items).

  class ui(uiTemplate):
  def __init__(self, **properties):
  self.init_components(**properties)  
  self.pbs.items = ["ssss", "cscs", "sssf", "cscf", "scsf", "cccf", "scsc", "cccc"]   
    
  self.bc_images = {
  'ssss': app_tables.images.get(bound_cond='ssss')['images'],
  'cscs': app_tables.images.get(bound_cond='cscs')['images'],
  'sssf': app_tables.images.get(bound_cond='sssf')['images'],
  'cscf': app_tables.images.get(bound_cond='cscf')['images'],
  'scsf': app_tables.images.get(bound_cond='scsf')['images'],
  'cccf': app_tables.images.get(bound_cond='cccf')['images'],
  'scsc': app_tables.images.get(bound_cond='scsc')['images'],
  'cccc': app_tables.images.get(bound_cond='cccc')['images'],      
  }
    
  def plate_boundarys(self, sel_boundary_condition):
  return self.bc_images[sel_boundary_condition]     
  
  def sel_boundary_condition_change(self, **event_args): 
  #selects image to display on home page
  self.bc_image.source = self.plate_boundarys(self.pbs.selected_value)     
  return
4

You can put the code into the form_load event to load all images, then hide them. Show them only when the end-user selects a specific condition from a drop-down box

5

Hi Tony…could you provide me with a simple example of some code inside a “form_load” event? Not quite sure how to do this…thanks!

6

Here you go, please feel free to ask if there is any issue. I had exact same issue when I started with Anvil