Rev. 2.73

lazierload.gif

lazierLoad는 보다 빠른 웹페이지 로딩을 위해 만들어진 자바스크립트 라이브러리이다. 웹페이지의 HTML이 완성되는 시점에 이벤트(oncontentloaded)가 발생하고 현재 스크롤 위치와 창크기를 분석하여 방문객이 실제로 보고 있는 영역에 속한 이미지만을 로드하여 마치 브라우저의 페이지 읽기 속도가 향상된 것처럼 속이는 기발한 이미지 로더이다. 위아래로 긴 페이지에 이미지가 즐비하거나, 사진 위주의 블로그에는 더없이 좋은 솔루션이다. 더불어 미스클릭 또는 엉뚱한 검색으로 연결된 타게팅 되지 않은 방문객들(스크롤 하지않고 바로 떠나는)에게 이미지 트래픽을 더이상 낭비하지 않아도 된다.(잘못된 내용입니다.)

화면에 표시되지 않은 나머지 이미지들은 로딩 인디케이터(Indicator)와 blink 이미지로 대체되며, 스크롤이 해당영역으로 이동했을 때 원본 이미지를 로드하고 할당된 이벤트를 파괴한다. lazierLoad는 Prototype기반 사이트에서 자바스크립트 파일을 추가하는 것 만으로 손쉽게 적용할 수 있다.

<script type="text/javascript" src="js/bramus/lazierLoad.js"></script>

Comments

Got something to add? You can just leave a comment.

  • 리브리스 리브리스

    실제 이미지 앨범들이 이런 식으로 구성되면 좋겠네요. 좋은 아이디어인데다가 구현까지 언뜻 어려워 보입니다. ^^
    파이어준님도 추석 잘 보내세요~

    reply edit

  • 이 블로그에도 적용시켰습니다만, 그리 어렵지 않아요. 다소 귀찮기는 하지요. ^^;

    reply edit

  • 방금까지 유사한 기능의 구현이 필요해서 삽질하고 있었습니다.
    너무! 너무! 반갑네요 ㅎ
    소스보고 공부좀 해야 겠습니다. 좋은정보 감사합니다 :)

    reply edit

  • 도움을 드리게 된 것 같아서 기쁩니다. :)

    reply edit

  • 우오.. 오늘 정말로 재미있는 정보들 많이 얻고 갑니다. 잘 쓰겠습니다 :D. 감사합니다!

    reply edit

  • 자주 방문해 주셔서 감사합니다. ^^;

    reply edit

  • 지나가는이 지나가는이

    제가 확인해본바로 이 스크립트는 트래픽을 절약하기 위해 만든 것이 아닙니다.
    페이지를 여는 동시에 이미지를 모두 로딩은 하지만, 화면상에 출력해주는 것만
    스크롤을 내릴때 작동하는 것입니다.
    이미지 출력시 브라우저의 로딩속도를 분산시킨 것인데, 이미지가 자잘하게 너무 많은 경우
    오히려 각 이미지에 이벤트를 선언하느라 브라우저가 더 버벅거리는 문제가 있어 아예 사용하지 않는 것이 좋을 것 같습니다.

    결론은, 글 내용상의 '스크롤 하지않고 바로 떠나는)에게 이미지 트래픽을 더이상 낭비하지 않아도 된다.' 라는 설명은 옳지 않습니다.

    reply edit

  • 아 그렇군요. 감사합니다. 하도 오래전에 포스팅한 거라 가물가물 한데요. 어디선가 보고 번역한 것 같은 기억이.. 문제가 되는 문구는 수정하도록 하겠습니다.

    reply edit

Your Reaction Time!

captcha

avatar