IMAGE6 Image Lazy Loading 기법 그리고 Google I/O 에서의 새로운 방법 Lazy Loading 기법 이제 이미지가로드되는 것을 막을 것이므로 브라우저에 로드 할 시기를 알려줘야합니다. 이를 위해 이미지가 뷰포트에 입력되는 즉시 로드를 트리거하는지 확인합니다. 이미지가 뷰 포트에 들어갈 때를 확인하는 두 가지 방법이 있습니다. Method 1 : Javascript 이벤트를 통한 방법 이 기술은 브라우저에서 이벤트 리스너를 scroll, resize 및 orientationChange 이벤트에 사용합니다. 스크롤 이벤트는 스크롤이 발생할 때 사용자가 페이지에있는 위치를 감시하므로 매우 명확합니다. resize 및 orientationChange 이벤트도 똑같이 중요합니다. 브라우저 창 크기가 변경되면 resize 이벤트가 발생하지만 장치가 가로 방향에서 세로 방향으로 회전 할.. 2019. 6. 23. CSS IMAGE Sprites? CSS Image Sprite CSS IMAGE Sprites?HTTP 요청 횟수와 트래픽을 절약하는 기법으로 실제로 적용하기도 매우 쉬워서 많이들 사용하는 것 같습니다.웹 애플리케이션을 최적화하는 것은 유저들을 위한 필수 요소이며, 포털사이트 같은 부분에서는 현재 널리 쓰이고 있습니다. 마젠타 배경(투명, 마스킹)에 여러 아이콘들을 넣어서 하나의 이미지로 쓰는 것이 일반적입니다.여러 이미지를 HTTP 요청 한번으로 로드한 뒤에 'background-position' 속성을 사용하여 더 빠른 웹 브라우징을 가능하게 해줍니다. 스프라이트라는 용어는 비디오 게임에서 가장 자주 사용되는 컴퓨터 그래픽 기술에서 유래했다고 합니다. 컴퓨터가 그래픽을 메모리로 불러 와서 한 번에 그 이미지의 일부만 표시할 수 있다.. 2018. 4. 23. 이전 1 2 다음
