相同的容器宽度＆amp;高度作为加载图像

Question

我是Ionic Framework / Angularjs的新手，非常棒。

我写作和申请。它需要在ng-repeat列表中加载图像。一切都很好，除了图像显示加载和容器更改的高度。我不想要那个。 我想要： 1 - 保持与加载图像相同的高度和宽度。 2 - 完全加载后显示图像（因此不显示一半）。

更像Facebook App。

我怎么能在ionic / angular / 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将具有使用ng-src显示加载后图像的额外优势。 还要避免为网页使用超高清图像，因为它会减慢整个页面的加载速度。

如果图像分辨率较高，请先预览图像，请参阅下面的链接。 https://perishablepress.com/3-ways-preload-images-css-javascript-ajax/

Answer 2

如果您的图片尺寸已确定，则可以使用min-height和min-width来固定宽度。 您可以编写指令以通过JavaScript加载图片，在<img>事件中设置src onload。