javascript - Zhihu에 이미지를 로드하는 원리는 무엇입니까?

Question

처음에는 모두 흐릿하며, 화면 보기 범위 내에 들어오면 고화질로 표시됩니다.

처음에는 전처리된 저화소 이미지를 로딩한 다음 고화질 이미지를 표시하는 건가요?

아니면 다른 방법인가요?

Answer 1

제가 이해한 바는 작은 이미지를 먼저 로드한 다음 CSS3 필터를 사용하여 흐리게 처리한 다음 큰 이미지를 로드한 후 src를 교체하는 것입니다.

자세한 내용은 이 글을 참고해주세요 http://www.jackpu.com/medium-...

Answer 2

필터: 흐림(10px), 로딩 완료 필터: 흐림(0)

Answer 3

Zhihu는 캔버스를 사용하여 Medium과 같은 작은 이미지를 흐리게 하고 로드 후 큰 이미지를 제거합니다. 퍼지 알고리즘을 제어할 수 있다는 장점이 있지만 상대적으로 무겁다는 단점이 있다.

전환을 위해 작은 이미지를 흐리게 하는 브라우저의 기본 방법을 사용했습니다(https://blog.crimx.com/2016/1...). 장점은 상대적으로 가볍고 호환성이 좋다는 점이지만, 작은 이미지는 미리 흐리게 해야 더 좋은 결과를 얻을 수 있습니다. 호환성에 관계없이 CSS 흐림을 사용할 수 있습니다.

Answer 4

원리는 위에서 언급한 것과 거의 동일합니다. 여기서는 제가 직접 사용할 수 있는 vue 구성 요소도 만들었습니다
vue-img-loader