Forum | Appery.io

Hi Kateryna

Really sorry about this. I had to change this project, so the new link is as follows:

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

Steps to reproduce:

• 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 behind while it loads)
• The same behavior observed in native app after installing the APK in a device.

Hi Suda,

Each time you open a page it is displayed anew.
We recommend that you untick "Render all pages in one HTML file (jQuery Mobile multi-page template)" option in App Settings.

Hi,

Did you want me to tick that? Pls note that already I had this unticked. Attached screenshot.

Hi Suda,

Let's try, this will make your app load pages faster.

I have the exact same issue.

My background images are different on each page...
The sizes:
600x960 dimensions
file sizes are varied: 350 kb, 180 kb, 250 kb

But, I have always checked, tecked - "Render all pages in one HTML file (jQuery Mobile multi-page template)"

I have never tried it without ticking here. I will try that and let you know.

update:
tried it both ways - "Render all pages in one HTML file (jQuery Mobile multi-page template)" - checked and unchecked. no noticeable difference.

Have you tried changing the format (jpg,png etc.) of the images or checking if they are all the same?

Also flickering can sometimes occur if the page is loading something out of the container. Have you tried adding codeoverflow:hidden/code to the css class?

Hello!

"Render all pages in one HTML file (jQuery Mobile multi-page template)" completely eliminates this problem. There is a small delay when you first load the page. Please check it out again.

Hi Evgene and Louis!

Thanks for your help!

@Evgene, Although, in theory, Render all pages in one HTML file (jQuery Mobile multi-page template) should fix the issue. It does not. I have selected Render all pages in one HTML file (jQuery Mobile multi-page template) for months. That has been my selection all the time I have worked on this project. I only tried un-checking today. I agree it should fix it. But it doesn't.

Perhaps, the issue is with the background being larger than the container - as Louis mentioned. This is necessary for the project, as the larger background gives a nice moving effect on phones, and is the correct size for tablets.

Since I am using javascript to bring in the background, how would you recommend for me try the "overflow:hidden" idea?

I can also try jpg instead of png. Will check tomorrow

Thanks again!

Hi Matt,

If you haven't already assigned a CSS class to the background you could do so using:

code$("#selector id").addClass("class name")/code
Obviously changing the first and second part to match yours.

But in general, I prefer to use CSS to add background images etc (I know you tried this earlier).

Just to add: Did you try render in one page when you were only using CSS to manage the background? Maybe JS is causing a delay on slide?