Zhihu는 캔버스를 사용하여 Medium과 같은 작은 이미지를 흐리게 하고 로드 후 큰 이미지를 제거합니다. 퍼지 알고리즘을 제어할 수 있다는 장점이 있지만 상대적으로 무겁다는 단점이 있다.
전환을 위해 작은 이미지를 흐리게 하는 브라우저의 기본 방법을 사용했습니다(https://blog.crimx.com/2016/1...). 장점은 상대적으로 가볍고 호환성이 좋다는 점이지만, 작은 이미지는 미리 흐리게 해야 더 좋은 결과를 얻을 수 있습니다. 호환성에 관계없이 CSS 흐림을 사용할 수 있습니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
제가 이해한 바는 작은 이미지를 먼저 로드한 다음 CSS3 필터를 사용하여 흐리게 처리한 다음 큰 이미지를 로드한 후 src를 교체하는 것입니다.
자세한 내용은 이 글을 참고해주세요 http://www.jackpu.com/medium-...
필터: 흐림(10px), 로딩 완료 필터: 흐림(0)
Zhihu는 캔버스를 사용하여 Medium과 같은 작은 이미지를 흐리게 하고 로드 후 큰 이미지를 제거합니다. 퍼지 알고리즘을 제어할 수 있다는 장점이 있지만 상대적으로 무겁다는 단점이 있다.
전환을 위해 작은 이미지를 흐리게 하는 브라우저의 기본 방법을 사용했습니다(https://blog.crimx.com/2016/1...). 장점은 상대적으로 가볍고 호환성이 좋다는 점이지만, 작은 이미지는 미리 흐리게 해야 더 좋은 결과를 얻을 수 있습니다. 호환성에 관계없이 CSS 흐림을 사용할 수 있습니다.
원리는 위에서 언급한 것과 거의 동일합니다. 여기서는 제가 직접 사용할 수 있는 vue 구성 요소도 만들었습니다
vue-img-loader