Post

[jQuery] 가시영역의 이미지만 로딩 – Lazy Load Plugin for jQuery

Posted Updated
By songmiok
1 min read
[jQuery] 가시영역의 이미지만 로딩 – Lazy Load Plugin for jQuery

Lazy Loading 이란?

alt text

lazy loading은 페이지를 읽어들이는 시점에 중요하지 않은 리소스 로딩을 추 후에 하는 기술 입니다.

웹 성능 최적화를 위한 Image Lazy Loading 기법
처음에는 화면에 보여지는 이미지만 로딩 되어있고, 스크롤 시 아래 이미지들을 호출하는 플러그인

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
32
33
34
35
36
37
38
39

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    img{ margin:100px 0; display:block}
  </style>
  <script src="jquery-1.8.3.min.js"></script>
  <script src="jquery.lazyload.js"></script>
  <script>
    $(function() {
      $("#lazyload img").lazyload({placeholder : "grey.gif"});
    });
  </script>
</head>
<body>
  <div id="lazyload">
    <img src="a1.jpg" alt="">
    <img src="a2.jpg" alt="">
    <img src="a3.jpg" alt="">
    <img src="a4.jpg" alt="">
    <img src="a1.jpg" alt="">
    <img src="a2.jpg" alt="">
    <img src="a3.jpg" alt="">
    <img src="a4.jpg" alt="">
    <img src="a1.jpg" alt="">
    <img src="a2.jpg" alt="">
    <img src="a3.jpg" alt="">
    <img src="a4.jpg" alt="">
    <img src="a1.jpg" alt="">
    <img src="a2.jpg" alt="">
    <img src="a3.jpg" alt="">
    <img src="a4.jpg" alt="">
  </div>
</body>
</html>

다운로드

JavaScript, jQuery
lazy loading
This post is licensed under CC BY 4.0 by the author.