이미지를 위한 아름다운 자리 표시자 만들기

(사용자 연결 품질에 따라) 이미지를 로드하는 데 시간이 걸리면 아름답게 제작된 인터페이스의 레이아웃이 "중단"되는 상황에 직면한 적이 있습니까? 아래 예와 같습니다.



이는 브라우저가 미리 콘텐츠에 표시하려는 이미지의 크기에 대한 단서가 없기 때문에 발생합니다.

이 문제를 해결하는 가장 쉬운 방법은 aspect-ratio 속성을 사용하여 이미지를 로드하기 전에 예약해야 하는 공간(사용자의 크기 표시 기준)을 브라우저에 알리는 것입니다. 차이점을 확인하십시오.

img {
/* Makes all images responsive */
  width: 100%;
  height: auto;

/*
  Here, I'm using the image's width and height,
  but you can come up with diference aspect ratios.
*/
  aspect-ratio: 760 / 235;
}

따라서 갑작스러운 레이아웃 변경을 해결하지만 애니메이션 배경을 추가하면 더 잘할 수 있습니다.

애니메이션 배경 표시

아래 예와 같이 배경색을 추가하거나 두 가지 이상의 색상 사이의 전환을 애니메이션으로 표시하여 앱의 빈 공간을 무언가로 채워야 한다는 힌트를 사용자에게 제공할 수 있습니다.



그리고 우리의 코드는 다음과 같을 것입니다:

:root {
  /*
  Set the default aspect ratio. You can change
  this CSS variable per class/id or event
  creating diferente classes.
  */
  --aspect-ratio: 16/9;
}

img {
/* Makes all images responsive */
  width: 100%;
  height: auto;
}

/* Put all your images inside this container */
.image-container {  
  aspect-ratio: var(--aspect-ratio);
  position: relative;
  animation: background-loading .8s linear infinite alternate;
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
}

/* The placeholder animation */
@keyframes background-loading {
  0% {
    background-color: #f9fafb;
  }
  100% {
    background-color: #d1d5db;
  }
}

결과는 다음과 같습니다(CodePen에서 코드 확인).



그러나 이미지 색상과 일치하는 화려한 배경을 표시하면 훨씬 더 좋아질 수 있습니다.

다채로운 이미지 자리 표시자 표시

BlurHash은 이미지 자리 표시자를 간략하게 표현한 것입니다. 브라우저에 이미지를 보내기 전에 이미지를 처리하는 데 사용하고 알고리즘이 실제 이미지를 다운로드하기 전에 사용자에게 보여줄 수 있는 흐린 이미지로 변환할 수 있는 20-30자의 문자열을 얻게 됩니다. 어떻게 보이는지 확인하십시오.



단순성과 시간을 위해 React에서 마지막 효과를 구현했지만 원하는 프레임워크에서 다시 구현할 수 있습니다. 이미지의 불투명도를 변경하는 onLoad 이벤트에 주목하십시오.