Yurii Orishchuk
Posts: 0
Joined: Fri Feb 14, 2014 8:20 am

Background image flickering when moving between pages

Hi Matt,

Please show us your app public link and describe how we can reproduce it in your app.

Regards.

Matt Scott
Posts: 0
Joined: Wed Jun 19, 2013 7:05 am

Background image flickering when moving between pages

Thanks Yurii,

I would appreciate that very much.

This is soooo frustrating. I have spent so many hours on this and I cannot find the solution.

Let me share with you everything I have tried. I originally used this old code on all my pages.

Tiggzi('mobilecontainergod1eng').css('background-image','url("' + Tiggzi.getImagePath('bgextra1.png') + '")');
Tiggzi('mobilecontainergod1eng').css('background-repeat','no-repeat');
Tiggzi('mobilecontainergod1eng').css('background-size','cover');

You can see this for example on God_1_Eng, Many_Things_Happened_Eng, others.

This code always produces the "background flashing" effect.

Today, I have tried some different options on SOME of my pages, to see the difference.

I am trying:
$('div[dsid="mobilecontainersin3eng"]').css('background-image',
'url('+Appery.getImagePath('bglaw2phone2.png')+')');
$('div[dsid="mobilecontainersin3eng"]').css('background-repeat','no-repeat');
$('div[dsid="mobilecontainersin3eng"]').css('background-size','cover');

You can see this for example on the page "Sin_3_Eng"
Sometimes, when I check in the Appery Tester, it works perfectly, with no flashing.
Sometimes, there is flashing.

I have also tried the CSS method.
I have used the class name "bglaw3" on mobilecontainerlaw3. and then made a css file, "bgcontrol." and I have used the following css in the file bgcontrol:

.bglaw1 {
background-image: url(../../../../files/views/assets/image/bglaw1phone.png);
background-repeat: no-repeat;
background-size: cover;
}
.bglaw3 {
background-image: url(../../../../files/views/assets/image/bglaw3phone2.png);
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.bgcircles {
background-image: url(../../../../files/views/assets/image/purplebackground.png);
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.bgprayer {
background-image: url(../../../../files/views/assets/image/bgextra2.png);
background-repeat: no-repeat;
background-size: cover;
}

This seemed to work when I only had 1 or 2 classes here, but when I added 2 more classes, and check again on the Tester, it started flashing again.

I am totally out of ideas, and out of energy, frankly. It seems like it should be such a basic task, but I cannot get it to work.

I would appreciate it if you would check my app, and my use of css and javascript on my pages. There is must be a conflict somewhere. I am only using the most basic functions though... adding backgrounds, javascript for centering images, and for page navigtion using swipes, and button clicks.

Of course, when using the app, the "flashing only happens the first time each page is seen. When navigating backwards through the pages that have already been seen, there is no flashing.

As you check and open in the Tester, to see these effects, simply open the app, and on the home screen, you will see:
Gospel Tools logo,
and under:
Toolbox

Please tap on the image under toolbox, the image says, "Knowing God." Then you may tap on English, and then swipe through to see the background flashing on each page. (You may also see the flashing if you tap on "Thai." I have not adjusted any code on the Thai pages. All the Thai pages still use the old code:

Tiggzi('mobilecontainergod1eng').css('background-image','url("' + Tiggzi.getImagePath('bgextra1.png') + '")');
Tiggzi('mobilecontainergod1eng').css('background-repeat','no-repeat');
Tiggzi('mobilecontainergod1eng').css('background-size','cover');

Thanks for checking this for me. I'm out of answers and have lost so much time trying with much error.

The app name is: Gospel Tools Thailand. It has been shared with a href="mailto:support@appery.io" rel="nofollow"support@appery.io/a

Thanks again,
Matt

Matt Scott
Posts: 0
Joined: Wed Jun 19, 2013 7:05 am

Background image flickering when moving between pages

Thanks again Louis. I tried using CSS on some of my pages to bring in the background with mixed results. With java backgrounds still remaining on some.

With what little I know, It should be fine to use both, css for the backgrounds, using java to center other images, and the using the swipe functions on each page. I can't find the conflict.

Thanks again for your time!

Evgene Karachevtsev
Posts: 12
Joined: Mon Apr 28, 2014 1:12 pm

Background image flickering when moving between pages

Hello Matt,

Sorry for delay. As an option you can make the invisible img components on the start screen and add images that will be used as background in them as assets. This will force the browser/WebView to cache images. And when switching on the respective screens, the background should be displayed without delay (as it is now when re-opening of the screen)

Matt Scott
Posts: 0
Joined: Wed Jun 19, 2013 7:05 am

Background image flickering when moving between pages

Thanks Evgene,

It still does not work.

I did as you said.

  1. Insert Image Components on Tools Screen, (1st screen).

  2. Chose each of my backgrounds.

  3. Made the image size very small in dimensions, so i could see what I'm working with.

  4. Unchecked the box for visible on each image.

    Same. Result. As. Always.

    Every time I load the app, the backgrounds flash and don't fill up the screen in the same sequence.
    Page:
    First screen about God - no flash
    Screen with big numbers at top : 01 - flash/ white space at bottom
    02 - sometimes slight flash
    03 - sometimes slight flash
    04 - flash/ white space at bottom
    3 hearts - flash/ white space at bottom
    prayer - flash/ white space on half of screen
    final page with red background - flash/ white space on half of screen

    It just doesn't make sense to me. As I mentioned in posts above, I have tried 3 various forms of code, 2 java, 1 just using css classes, and I cannot get any of them to work consistently.

    Even this idea, of pre-loading the images, which should work - doesn't work.

    I just don't understand.

    As you can see from the other active topics of mine, for some reason, this very simple project of mine, still has the most basic problems - backgrounds, swiping, and speed of transitions.

    What I am overlooking? (As I pull my hair out in frustration). Ha ha.

    Thanks again,
    Matt

Matt Scott
Posts: 0
Joined: Wed Jun 19, 2013 7:05 am

Background image flickering when moving between pages

also, which of the codes in the appery docs and in this forum is appery currently advising people to use?

i have some cases of each of these. none work consistently on every page. they work on some pages, and don't on others.

load, run javascript:

$('div[dsid="mobilecontainersin3eng"]').css('background-image',
'url('+Appery.getImagePath('bgl2_600.jpg')+')');
$('div[dsid="mobilecontainersin3eng"]').css('background-repeat','no-repeat');
$('div[dsid="mobilecontainersin3eng"]').css('background-size','cover');

load, run javascrip:
Tiggzi('mobilecontainergod1eng').css('background-image','url("' + Tiggzi.getImagePath('bgextra1.png') + '")');
Tiggzi('mobilecontainergod1eng').css('background-repeat','no-repeat');
Tiggzi('mobilecontainergod1eng').css('background-size','cover');

and the css class option:
.bglaw1 {
background-image: url(../../../../files/views/assets/image/bglaw1phone.png);
background-repeat: no-repeat;
background-size: cover;
}

Matt Scott
Posts: 0
Joined: Wed Jun 19, 2013 7:05 am

Background image flickering when moving between pages

another idea - what effect does page size setting have on this? as tested in both phone and tablet. (project pages are set at 320x480

Maryna Brodina
Posts: 0
Joined: Thu Apr 05, 2012 7:27 am

Background image flickering when moving between pages

Hello!

Have you tried to add CSS to background image without using JS?

Matt Scott
Posts: 0
Joined: Wed Jun 19, 2013 7:05 am

Background image flickering when moving between pages

Hi Maryna!

Thanks for taking a look here.

this is the only css only route i have tried:

adding a class name to mobilecontainer, example: class name: bglaw1

and then create css file, backgroundcontrol, with each class name:

.bglaw1 {
background-image: url(../../../../files/views/assets/image/bglaw1phone.png);
background-repeat: no-repeat;
background-size: cover;
}

it's so strange for me Maryna, because i tried this on some of my pages. On 1 or2 of them, it seems to work. but on 3 more it doesn't work. so strange. in theory, it should work perfectly. i can't imagine what is causing the problem.

do you have any other better options for the css?

thanks as always!
matt

Yurii Orishchuk
Posts: 0
Joined: Fri Feb 14, 2014 8:20 am

Background image flickering when moving between pages

Hi Matt,

At first i see you sometimes use full URLS to server. It should be used only related URLs.

Please try to cache images:

  1. On start page add page load event handler with action "Run javascript".

  2. Populate it with following js:

    precode

    //Here you should use all images which is you want to cache.
    var imagesToChache = [
    "files/views/assets/image/purplebackground_600.jpg",
    "files/views/assets/image/bgl4_600.jpg",
    "files/views/assets/image/bgextra2_600.jpg",
    "files/views/assets/image/redbackground_600.jpg"
    ];

    var body = jQuery("body");

    for(var i = 0; i < imagesToChache&#46;length; i++){
    var currentImage = jQuery('<img class="cacheImage">');
    currentImage&#46;attr("src", imagesToChache);
    body&#46;append(currentImage);
    };

    /code/pre

  3. Create new CSS asset:

  4. Populate it with following CSS code:

    pre

    &#46;cacheImage{
    position: absolute;
    width: 1px;
    height: 1px;
    bottom: 1px;
    right: 1px;
    }

    /pre

    Regards.

Return to “Issues”