Background-image slow rendering

ionic-v1
1

Hi,

I have started to develop on Ionic since 5 weeks and it’s really great. I’m an iOS developer but I wanted to develop on both iOS and Android at the same time.

I’m facing an issue with one my project, a tabs project.

I have 5 tabs, each with a homepage containing a local fullscreen background.

Here an exemple of one homeview :

<ion-view view-title="Stores" hide-nav-bar="true">
     <ion-content id="home_stores" scroll="false">
          <h2>My title</h2>
     </ion-content>
</ion-view>

And here the associate style :

#home_stores {
	background-color:#000;
	background-image:url('../img/stores/stores_home_bg.jpg');
	background-size:100% 100%;
	background-position:center center;
	background-repeat:no-repeat;
}

After launching my app on iOS, I see the first homepage perfectly well, after the splashscreen. But if I click on other tab, the background image of the new view will be black during 100-300ms and after the image will be displayed. The visual effect is then really crappy.

I don’t know how to improve that.

Is a css minification can improve performance on Dom element rendering ? Do I have to preload somewhere these local images?

The same issue happens with all local images loading for the first time after app launch. If I go back on already viewed tab, there is no issue.
If I push a new view containing a full background image for the first time, the same effect will be present. But when i’m going back and re-push the same view, the image will be displayed instantly.

Thanks for your feedbacks !

3 Likes
2

Same issue! :confused:

I’m not using crosswalk and dont wanna use because the generated .apk is too large.

3

I have found a workaround.

In my index.html, here what I have :

<body ng-app="myapp">
    <ion-nav-view id="main_nav_view"></ion-nav-view>

    <div id="images_loader">
         <img class="fullscreen" ng-src="assets/img/not_logged_bg@3x.jpg" />
         <img class="fullscreen" ng-src="assets/img/home_bg.jpg" />
         <img class="fullscreen" ng-src="assets/img/contacts/generated_card_bg_7.jpg" />
         <img class="fullscreen" ng-src="assets/img/contacts/card_map_bg.jpg" />
         <img class="fullscreen" ng-src="assets/img/contacts/card_phone_bg.jpg" />
         <img class="fullscreen" ng-src="assets/img/contacts/tags_bg.jpg" />
     </div>
</body>

And I have this associated CSS directive :

#images_loader {
    position:absolute;
    left:-10000px;
    width:100%;
    height:100%;
}

My “big images” are loaded at the app launched and when I use them in views, there is no more slow rendering.

Hope It will help you :slight_smile:

2 Likes
4

I think using this is a better way than hiding your images

Repo

Documentation

5

The issue is not a “downloading issue”. The imageCacheFactory library is used to download images from the web and put them in the cache.

Here I talk only about local image and DOM loading.

If you download “big images” and put them in caches, you will notice slow rendering too at the first load when these image are used in full screen.

6

Same issue! does anyone have a solution or workaround?

7

Same with me, even with ionic 2 :frowning:

8

Same issue with both local images and remote and it doesn’t looks like a download issue.
Anyone found a solution?

9

Hi, for me does not work.

In internal pages you use img tag, ion-img or another?

Thanks.

10

lazyload.js is also a simple and easy to use option

11

work, but you tried scroll your application? image appear :slight_smile:

12

Hey,
I think a simple way to preload the image would be to use new Image() in your angular.run() like this:

angular.run(function(){
    let img = new Image();
    img.src = '../img/stores/stores_home_bg.jpg';
}

It preloads the images and lets ionic cache from the start.