Image Lazy Loading

2016-12-05 09:30:072016-12-05 09:35:53
top
before

Image Lazy Loading

2016-12-05 09:30:072016-12-05 09:35:53

이 블로그에서는 사용자가 접근한 글 뿐만 아니라 이전글 이후글들에 대해서도 컨텐츠를 가져온 후 스크롤을 컨트롤한다.

이전/이후글에 image가 포함되는 경우 브라우져는 이에 대하여 이미지를 가져오려 할것이고,이는 사용자 및 서버의 네트워크 리소스면에서는 손해이다. 특히 모바일 사용자의 경우 더욱 크리티컬하다.

이 블로그에서는 viewport에 보이는 이미지만 로딩한다. 서버에서는 먼저 빈 이미지를 src로 컨텐츠를 내려주고, 클라이언트가 viewport에 보이는 이미지에 대하여 해당이미지를 로딩하고 완료되면 보여준다.

접근하는 클라이언트의 viewport 폭에 따라, 보여줄 이미지의 폭이 변하고, 이미지 폭에대한 이미지의 가로 세로 비율에따라 실제 표시되는 높이가 다르게된다.

때문에 빈 이미지를 내려줄때, about:blank 또는 1픽셀(가로세로 1:1비율)의 blank image를 내려주게 되면,로딩 전후에 이미지 영역의 높이가 다르게된다.

사용자가 보기에 이미지 하단의 컨텐츠가 꺼떡거리는것으로 보이고, 이미지 하위의 영역에 대하여 렌더링 리플로우가 발생하여 성능상으로도 올바르지 않다.

이를 방지하기 위해서는 기존 이미지의 가로세로 비율을 유지한 blank 이미지가 필요한데, 이 블로그에서는 svg dataurl을 사용한다. svg는 벡터형 표기방식으로 기본적으로 xml형을 가지고 있는데, 사이즈를 가변적으로 변경하기 용이하고, 공백이미지에 대하여 이미지 크기와 크게 상관없는 크기의 dataurl을 가지게 된다.

<img src='data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg"  width="100" height="50" /%3E' width="100" height="50">