Update layout after loading content

Hi,

I’m pretty close to my final application, but i’ve got a problem. In my header section i’ve got Title (may be little or bigà and image. The problem was loading caching image take time, and when my content is loaded it’s overlap the rest of content page.

They have mean to say to ionic to “update” layout for fix that. Or say to ionic to wait all content was loading for display page?

This is my result… First picture with my bug. Other picture who all work fine. Do you have any idea?
Thanks you!

Maybe, assign a fixed height to your image in your HTML/CSS code

Hi,

Thanks for you answer, but the image size depend of device resolution… So impossible to fix the height…

Thanks,

Of course you could, fix the imagine height with a responsive css

Just a dummy css example:

@media only screen and (max-width: 500px) {
    img {
       height: 200px;
    }
}

I have add with and height for testing… The problem image was empty when caching load is not finish. I will try display tmporary image, and hide it, and show final image when it’s loaded.

Thans for you help, I will update this post for say if it’s works or not.

If that’s the problem, then you could encapsulate for example the image in a div a set a fixed width and height to it … just an idea

like

<div id="mypicture"><img/></div>

 mypicture {
    width: 50px;
    max-width: 50px;
    height: 50px;
    max-height: 50px;
}

Hi redrichads,

Thanks for you help…

This is my workaroud. I have add image with same ration in my application. And add class with absolute position and negative z-index. I wait 1/4s and remove class.

<img *ngIf="!contentLoaded" class="loading" src="./images/image_preview.png" />
<img [class]="contentLoaded ? 'image-loaded' : 'image-loading'"  src="{{event.image}}" image-cache />

If it’s could help other people.

Thanks you,

Nice to hear you found a solution.

But just for the record, the solution with setting a fixed width to a div is the solution I use aka I don’t have to load a dummy image in my case

Hi,

Sure, but with caching loading we have temporary icon say don’t have file… So with my fix all look ok.

Thanks for your help

Hi, for information… They are other solution…


We have function resize() must be call after update header or other…

Have a nice day.

1 Like