Same container width and height as image loading

Question

I am new to Ionic Framework / Angularjs and it is fantastic.

I write and use the application. To download images in the ng-repeat list, a download is required. everything is fine except for the image showing the loading and height of the container changes. I do not want it. I want: 1 - keep the same height and width as the uploaded image. 2 - show the image after full load (so do not show half).

more like a Facebook app.

How can I do this in ionic / angular / css?

would be grateful if he could share the codes ...

thanks -Navi

Answer 1

: . , , facebook, facebook, , . , :

HTML:

<div class="image-container">
    <img src="path of image to be loaded" />
</div>

CSS

.image-container{
    min-height:500px;
    min-width:500px;
}
.image-container img{
    height:100%;
    width:100%;
}

AngularJS , ng-src. -, .

, . . https://perishablepress.com/3-ways-preload-images-css-javascript-ajax/

Answer 2

, min-height min-width . JavaScript, <img> src onload .