https://github.com/tuupola/jquery_lazyload/tree/2.x
lazyload는 화면에 출력할 이미지대신에 1pixel짜리 작은 이미지를 전송하고 원래의 이미지는 화면이 스크롤될때 따로 전송을 받는 방법입니다. 화면밖의 이미지는 전송을 하지 않았다가 화면이 스크롤되면 그때 이미지 전송을 받습니다.
이미지와 텍스트전송이 분리되어서 트래픽 분산효과가 나타나고 체감하는 로딩속도는 빨라지게 됩니다.
엄밀하게 말하자면 트래픽을 줄일 수 있는 방법은 아닙니다. 하지만 텍스트와 이미지를 분리해서 전송하기 때문에 체감속도가 빨라지는 효과가 나타나고 일부나마 트래픽이 줄어들고 전송대역폭 감소를 기대할 수 있습니다.

 

1.0 버전

일부 이미지가 로딩되지 않던 문제를 해결했습니다.

외부이미지에는 적용하지  않도록 수정했습니다.

소스를 정리했습니다.

karma

profile
imageprocess, 통합검색확장모듈
아빠팬더곰은 영원한 초보
  • profile
    하아! 이런 고오급 애드온을!! 감사합니다.
  • profile profile
    2012년에 처음 만들었던 애드온입니다.
    근데 사람들이 잘 모르더군요. 왜 필요한지...ㅎㅎ
    https://soonj.net/index.php?mid=download&package_srl=9896
    js 소스가 업데이트 되서 버전업했습니다.
  • profile profile
    얼핏 알고는 있었습니다.
    최신 버전에서 작동이 보장되지 않아 설치 못하고 있었는데 이렇게 업데이트 해주셔서 너무 감사합니다!!
  • ?
    좋은애드온 감사드립니다.
  • ?
    무료로 해주시다니 정말 감사합니다!
    잘쓰겠습니다!
  • ?
    와..마침 딱 필요했는데 늘 너무 감사합니다.
  • ?
    정말 고맙습니다!
    필요했는데 정말 좋아요!
  • ?
    와 ㅠ
    이거 진짜 필요했거든요 ㅠㅠ
    감사합니당~
  • ?
    php exif 애드온과 사용시 큰 이미지가 여러장 아래로 길게 있는 경우에
    이미지 로드가 안되는 경우가 조금 있네요^^
  • ? profile
    해당부분의 url이나 소스를 좀 보여주실 수 있나요?
  • ? profile
    php_exif를 업데이트 했습니다. 한번 확인해주시면 고맙겠습니다.
  • profile ?
    조금 나아지긴 했는데
    크롬에서는 여전히 후반부 이미지 로딩에 실패합니다.
    http://bitly.kr/Trz4K

    근데 아마 확인 하실때에는 레이지 로드는 꺼져 있는 상태일것 같습니다^^;
  • profile
    감사합니다~
  • profile
    호우
  • profile
    일부 이미지가 출력이 안되는 현상이 있네요. 저는 윈도우 크롬입니다.

    <img class="lazyload" src="/addons/lazyload/gray.png" rawsrc="//도메인/./files/attach/images/605/805/087/002/70906eaf48d9a7fbb7c499a3d5060d1d.jpg" alt="로이 인사드려요 - 가입인사 - 포메러브 : undefined" title="로이 인사드려요 - 가입인사 - 포메러브 : undefined">

    아예 준비된 회색이미지도 안나옵니다.
    재미난 건 같은 브라우저의 다른탭에서 애드온을 비활성화하고 저장을 하고 나서 다시 이미지가 안보이는 탭으로 넘어와서 스크롤을 움직여 보면 이미지가 보입니다.

    사실 lazyload 자체가 너무 제한적인 케이스로 작동하는 문제도 있고 해서 사용하지 못했었는데 이번 버전 테스트 삼아 잠깐 써보니 이미지가 안보이는 문제도 있어 혹시 몰라 소스 형태를 남겨드렸습니다.
    저희는 애드온 사용을 하지는 않고 있습니다.
  • profile profile
    정보 감사합니다.
    lazyload 프로젝트가 몇가지 있습니다.
    그중 이것이 전부터 쓰던 것이라 만만했었는데 문제가 있군요.
    좀더 이것 저것 테스트를 해보겠습니다.
  • profile
    감사합니다. ^_________^
  • profile
    감사합니다. 잘쓰겠습니다 !
  • ?
    별점!
  • ?
    별점을 안남겼네요! 감사합니당
  • ?
    $("img.lazyload").lazyload(); 이런식으로 불러와져서 가끔 이미지가 아예 안뜨는 경우가 있는데 검사해서 jQuery("img.lazyload").lazyload(); 이렇게 바꿔주면 잘 뜹니다. 뭐가 문제일까요?
  • profile
    업데이트 되었군요.
    감사합니다.
  • ?
    좋은 애드온 너무 감사합니다. 잘 사용하겠습니다.
  • profile
    감사히 쓰겠습니다.
  • profile
    이전부터 잘 쓰고 있는 애드온입니다만 업데이트가 되었군요!
    사용 시 확실히 설명처럼 속도 향상에 크게 실감이 납니다. 사실상 모두의 반필수 애드온!!
  • profile
    훌륭한 자료 감사합니다.
  • profile
    훌륭한 애드온을 제공해 주셔서 감사드립니다.
    특정 css class 가 포함되는 이미지는 변환(애드온 적용)을 피할수 있도록..
    애드온 설정 페이지에 css class들을 입력하면 해당 class가 있는 이미지는 반영이 안되도록 옵션을 추가해주시면 감사드리겠습니다.
  • profile profile
    알겠습니다. 검토해보겠습니다.
    js나 css에는 영 꽝!이라서리...ㅎㅎㅎ
  • profile profile
    감사합니다^^
    lazyload.addon.php 에서 preg로 이미지를 추출후 for 문이 보이던데 해당 부분에서 애드온 설정 값과 비교해서 continue 해버리면 되지 않을까 생각됩니다.
  • profile profile
    lazload를 업데이트하려고 수정중인데 라이믹스는 코어에서 이미지태그를 재설정하면서 class가 다 소실되어 버립니다. 외부이미지는 class가 살아있는데 첨부화일의 class는 다 삭제해버리는군요. 수정할때 보면 class가 정상적으로 있는데 본문읽기소스에서는 안나타납니다. 일부 class를 제외하는 것은 포기합니다.
  • profile profile
    라이믹스의 경우, 시스템 설정 -> 보안 설정 -> "HTML Class" 항목에 해당 클래스를 입력해주시면 필터링 되지않고 글 읽기에서 class가 출력됩니다.
  • profile profile
    버그인지 의도한 것인지는 모르겠지만 이미지태그에는 적용되지않더군요.
    클라스를 p,img 태그에 주면 p태그에는 클라스가 나타나는데 img 태그에는 여전히 필터링됩니다.
  • profile profile
    몇 가지 프로그램에서 에디터상에서 이미지에 class를 추가해서 사용하고 있는데..
    라이믹스의 경우 보안 설정에 입력을 해두면.. 잘 되던데요^^;
  • profile profile
    이 애드온을 적용한 상태에서 이미지에 클래스를 입력하면 글 읽기 페이지에서..
    애드온이 이미지에 클래스를 모두 지워버립니다.
    그래서 위에서 말씀하신것 처럼 img 태그에는 여전히 필터링이 안되는것 처럼 생각될수있습니다.
  • profile profile
    애드온이 필터링 하는 것은 맞습니다만 모든 애드온을 다 끄고해도 여전히 나타나지 않습니다.
  • profile profile
    새로올린 파일로 체크해보셨나요?.
    class를 따로 건드리지 않게 수정했습니다
  • profile profile
    감사합니다.
    아직 확인해 보진 못했습니다^^;
    저는 주로 페이지 컨텐츠 꾸밀때 이미지에 class를 넣어서 사용하는데 다시 사용할때 감사히 사용하도록 하겠습니다.
  • profile
    정식버전 설치해봤는데 모바일에서는 preload 이미지가 나타나지 않아 문제가 발생하네요.
    저희는 화면 특정 위치에 레이어로 알림창을 띄우는 경우가 있는데 preload 이미지가 뜨지 않고 조금 텍스트만 떴다가 바로 페이지의 모든 원본이미지가 한번에 뜨면서 이 알림창 위치등이 어긋나는 경우가 발생합니다.
    모바일에서는 정상동작하지 않고 있는 듯 하네요.
  • profile profile
    해당부분 소스보기를 쪽지로 좀 보내주실 수있나요?
  • profile profile
    쪽지로 보내드렸습니다.
  • profile profile
    모바일만 그런게 아니고 PC도 같은 문제가 있네요.
    아마도 이미지에 사이즈가 속성이 없는 경우는 preload 이미지가 다 안뜨는 상황인 듯 합니다.

    유일하게 preload 이미지 확인되는 곳이 뉴스 게시판의 카드형태의 컨텐츠 안에 작은 이미지인데 이 이미지는 스타일이 적용되어 있어 사이즈가 지정되어 있습니다.
  • profile profile
    파일을 새로 올렸습니다. 외부이미지의 경우는 적용되지않게 수정했습니다.
  • profile profile
    저희는 이미지서버를 따로 운영해서 그렇게 바꿔주시면 사용 자체가 불가능하겠네요.
    preload 가 나온다는 이미지도 스타일에 사이즈만 지정되어 있지 같은 서버의 이미지입니다.
  • profile profile
    화면 영역 밖에 있을때는 preload 이미지 자체도 안뜨는거죠? 그리고 스크롤로 이동해서 가시영역에 왔을때 preload가 뜨는 건가요 ? 그리고 로딩하면 교체하는것이고..
    이 방식이라면 저희가 페이지에서 특정 포지션을 잡아서 알림창 띄우는데 방해가 되서 사용은 못하겠네요.

    원본이미지 이던 preload 이미지이던 원래 보여야할 사이즈의 이미지가 잠깐이라도 안보이는 순간이 있다면 저희가 사용이 어렵겠습니다. 저희는 페이지에서 특정 엘리먼트 위치를 확인 후 그 엘리먼트에서 기준 으로 특정 위치에 알림창을 띄우는데 이미지들이 다 사라지는 순간이 있다면 y축 이 전혀 다른 값으로 잡혀 버리거든요.

    잠시 이미지가 없는 상태라면 저희 알림창을 띄우는 스크립트를 약간 지연하면 되겠지만 가시 영역 밖에 있는 것들의 경우 이미지 자체를 없앤 상태라면 지연시켜도 힘들겠네요.

    저희 사이트가 제공하는 알림창 특성 때문에 발생하는 특수한 상황일 수도 있겠습니다.
  • profile profile
    이미지서버를 사용하는 경우 lazyload가 의미가 없습니다.
  • profile profile
    페이지 로딩 속도를 조금 높여주려는 목적으로 사용해보려고 했습니다. 이미지는 일딴 띄우지 않게 하고 페이지만 빨리 띄우게 해보려구요. 물론 애드온이 동작하는 시간과 상쇄해서 의미가 없어진다면 소용 없는 시도 겠지만요.
  • profile profile
    외부서버에서 이미지를 불러오면 lazyload 사용하는 것과 같이 컨텐츠가 먼저 로딩 되고 난 후에 이미지가 불러와져서 속도가 빠르니 의미가 없다는 것인지 궁금합니다.
  • profile profile
    https://xetown.com/topics/1180897
  • profile
    감사합니다. 빨라진다니 무조건 다운....^^
  • profile
    감사히 받아갑니다.
  • profile
    좋은 자료 감사합니다!
  • profile
    감사합니다 ^^ 사진이 많은 페이지가 있서서 잘쓰겟습니다
  • profile
    감사합니다^^
  • ?
    감사합니다. 잘 사용하겠습니다. ~
  • ?
    최고예요~~b
  • profile
    감사합니다.
  • ?
    정말 좋습니다~~
  • profile
    좋은 자료 감사합니다.