Typolino – Improve image loading

Right now when the browser loads an image in a Typolino session you may experience some flickering. The word is rendered before the image is loaded. That makes sense, but it’s just plain ugly. One way to solve this issue is to show a placeholder image – or to wait with the whole content as long as the image is loading. Personally I think a placeholder is better as we don’t really know how long we would have to wait for the image. The technique works particulary well in our case as the image has a predictable size.

Placeholder

Instead of an actual image we can also use a dvi with some PrimeNg spinner / icon. This is the class for the image. Note the images that we use will all have a fixed resolution of 640px * 480px.

.lesson__img {
  object-fit: cover;
  max-width: 640px;
  width: 100%;
  background-color: #dbdbdb;
  padding: 1rem;
}

So the only thing we need to do is finding out when the image is loaded and then switch between the placeholder and the actual image. For this we can use the hidden attribute on the element.

<!-- Image -->
  <div class="ui-g ui-fluid">
    <div class="ui-g-12">
      <img
        class="lesson__img"
        [hidden]="!imageLoaded"
        *ngIf="imageUrl$ | async; let imageUrl"
        [src]="imageUrl"
        (load)="loaded()"
      />
      <img
        [hidden]="imageLoaded"
        class="lesson__img"
        src="assets/img_placeholder.jpg"
      />
    </div>
  </div>

I tend to put event these simple state changes into a function of the component:

loaded() {
    this.imageLoaded = true;
  }

Result

The result is as expected. But I really wonder if there is a way to mimic this resizing behavior with pure CSS and a simple DIV. I have to think about this a bit more, but the combination of max-width and some way to keep the aspect ratio (view height / view width??) doesn’t sum up correctly in my mind right now. Anyone any good ideas?