Forum | Appery.io

Hi there,

I'm developing an app where I use different background images in each pages. If we slide left/ right, the new page will be loaded. When we go to the next page, the background image is seen flickering and this looks ugly while using it.

I tried both by setting the CSS when page loads and by having a CSS for the mobile container which specifies the background image- but the result is same. Could you please let me know why this is happening and whether there is any resolution?

PS: The same behavior was there even testing with APK file after installing in a device.

Attached the image where the Cappuccino theme (brown) is visible behind the white image which is loading on top of it.

Hi Suda,

Probably you use too big images. What is their size/dimension?

Thanks for the reply. I have defined the pages as 640x960 in Appery and I got 3 images as follows. The issue is there for all three of these unfortunately

1. 640x960, 100kb

2. 640x960, 850kb

3. 640x960, 350kb

   Do you recommend any background image size/ resolution according to the page dimension defined in appery? Pls advice.

Hi Suda,

Most probably images are being loaded too long. Could you please try testing on device as a native app?

Hi Kateryna

Thanks, not sure you missed that part in my initial post- Actually the same behavior is observed in native app as well. I exported as APK and installed in my Android mobile. It make sense to see the loading effect as web page, but I'm mainly worried why it give same issue as native app as well. Pls advice.

Hi Suda,

Are these files inside your app or on a third-party server?

Hi, the images are inside the app. I've used the images which I uploaded using media manager in appery.

Hi Suda,

Please give us your app public link and describe steps to reproduce this problem.

We will take a look.

Regards.

Thanks Yurii. Pls find the public URL and steps to reproduce below:

URL: http://appery.io/app/mobile-frame?src...

Steps:

• Slide left/ right in the initial screen

• It will navigate between two pages

• But always the background images seen like flickering while loading (Can see the theme color while it loads)

• The same behavior observed in native app after installing the APK in a device

  Clue:

  Through some forums I assumed CSS preloading the background images might solve this and tried like below. But it didn't help for me. Pls see if this approach could be used, but I'm not sure the way I preloaded is correct.

  body:before {
  content: url() url();
  display:none;
  }

Hi Suda,

When opening this link, we get:
pre"Page not found (404) https://appery.io/app/error/404.seam"/pre