Та же ширина контейнера и высота, что и загружаемое изображение

Question

Я новичок в Ionic Framework/Angularjs, и это фантастика.

Я пишу и применяю. Для загрузки изображений в списке ng-repeat требуется загрузка. все в порядке, кроме изображения, показывающего загрузку и высоту изменений контейнера. Я не хочу этого. Я хочу: 1 - сохранить ту же высоту и ширину, что и загружать изображение. 2 - показать изображение после полной загрузки (так что не показывать половину).

больше похоже как в приложении для Facebook.

Как я могу это сделать в ионном/угловом/css?

будут благодарны, если можно разделить коды ...

благодаря -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 будет иметь дополнительное преимущество, показывая изображение после загрузки используйте нг-Src. Также избегайте использования изображений высокой четкости для веб-страницы, так как это замедляет загрузку всей страницы.

Пожалуйста, ознакомьтесь с предварительной загрузкой изображений в случае изображений с более высоким разрешением, см. Ссылку ниже.

Answer 2

Если ваш размер изображения определяется, вы можете использовать min-height и min-width до фиксированной ширины. Вы можете написать директиву для загрузки изображений с помощью JavaScript, установив <img>src в onload событие.