개인코딩개발공장

  • 홈
  • 태그
  • 방명록

2023/03/24 1

이미지를 화면에 잡힐때만 로딩하고 싶을때. (loading = 'lazy')

이미지 용량이 크다. 그렇다고 정적인 이미지를 없애기도 그렇다. 하지만 화면에 잡히지도 않는 이미지가 다운이 된다면? 그만큼 호스팅시 클라이언트에게 전송되는 이미지데이터가 든다는 것이고, 따라서 낭비다. # 예시 이 코드는 총 이미지 세개가 carousel형식으로 보여지게 되는 부트스트랩 태그다. 처음 carousel에 이미지경로1의 이미지가 보여지게 된다. 그다음 이미지2, 이미지3이 뜬다. 다음버튼은 그냥 보기 편하게 안썼지만 다음 버튼을 누르면 이 이미지들이 버튼을 누를때마다 슬라이드로 보여진다. 근데 네트워크탭을통해 확인하면 이 carousel이 화면에 보여지는 순간, 이미지1,2,3이 전부 다운받아진다. 이미지 하나의 용량이 100mb라고 할때 화면에는 이미지1만 보이는데 carousel이 켜진..

webStyling/design 2023.03.24
1
더보기
프로필사진

지극히 이기적인 개발 블로그입니다. https://nurd.work/

  • 분류 전체보기 (308)
    • javaScript (94)
      • concept (4)
      • jsDeepDive (26)
      • vueJs (17)
      • react (10)
      • typeScript (5)
      • nodeJs (22)
      • error (6)
      • etc (4)
    • AWS (13)
      • concept (7)
      • etc (6)
    • k8s (46)
      • concept (23)
      • CKA (16)
      • docker (6)
      • etc (1)
    • network (6)
      • ciscoPacketTracer (3)
      • vyOS (3)
    • webStyling (9)
      • design (9)
    • security (3)
      • application (3)
    • database (15)
      • MYSQL (13)
      • mongoDB (0)
      • redis (0)
      • etc (2)
    • etc (19)
      • python (3)
      • devTools (6)
      • etcTools (10)
    • linux (11)
      • concept (5)
      • etc (6)
    • project (18)
      • teamProject (2)
      • selfProject (4)
      • miniCode (12)
    • git (20)
      • git (6)
      • gitAction (1)
      • etc (13)
    • personal (22)
      • dailyLife (19)
      • ponderings (3)
    • designTools (24)
      • illustrator (4)
      • photoshop (13)
      • afterEffects (1)
      • premierePro (6)

Tag

ㅗㄱ,

최근글과 인기글

  • 최근글
  • 인기글

최근댓글

공지사항

페이스북 트위터 플러그인

  • Facebook
  • Twitter

Archives

Calendar

«   2023/03   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31

방문자수Total

  • Today :
  • Yesterday :

Copyright © Kakao Corp. All rights reserved.

티스토리툴바