Aktuell bauen mein Kollege und ich eine Angular 4 + Cordova App für Android und iOS. Eine Kernfunktion ist hier der Fotoupload, welcher mehrere Bilder entgegennimmt und diese als Previews anzeigt, während der Upload läuft.
Die Bilder werden in einer Liste als quadratische Kacheln angezeigt, indem die Foto-URL als background image mit background-size: cover geladen wird. Allerdings können diese Fotos dank neuster Smartphonekameras schnell über 3MB groß werden, was zu enormen Performanceproblemen geführt hat. Vor allem die Navigation innerhalb des Angular Material Tab Controls dauerte auf schwächerer Hardware schnell mehrere Sekunden.
Die Fotos im normalen img-Tag hingegen konnten trotz ihrer Größe problemlos angezeigt werden – allerdings auch nur, wenn man auf object-fit: cover; verzichtet. Offensichtlich ist hier die Neuberechnung der Bildgröße das Problem.
Das Resultat ist jetzt eine Liste mit Bildern im Original-Seitenverhältnis. Nicht ganz so schön, aber dafür läuft’s butterweich. 🙂
