Lazy Load

renderOnlyVisible 옵션과 visibleChange 이벤트를 조합하여, 보이는 패널만 이미지를 로드하는 성능 최적화 패턴입니다.

JavaScript

import Flicking from "@egjs/flicking";
import "@egjs/flicking/dist/flicking.css";
import "./styles.css";

const TOTAL = 100;
const COLORS = ["#e74c3c", "#3498db", "#2ecc71", "#f39c12", "#9b59b6"];
const getImageUrl = i => `https://picsum.photos/seed/${i}/250/180`;

const camera = document.querySelector(".flicking-camera");
for (let i = 0; i < TOTAL; i++) {
  const panel = document.createElement("div");
  panel.className = "flicking-panel";
  panel.style.background = COLORS[i % COLORS.length];
  panel.innerHTML = `<div class="placeholder">Panel ${i}</div>`;
  camera.appendChild(panel);
}

const loadedSet = new Set();
const infoBar = document.querySelector(".info-bar");

const updateInfo = () => {
  infoBar.textContent = `Images loaded: ${loadedSet.size} / ${TOTAL} (only visible panels are loaded)`;
};

const loadImage = panel => {
  const idx = panel.index;
  if (loadedSet.has(idx)) return;
  loadedSet.add(idx);
  panel.element.innerHTML = `<img src="${getImageUrl(idx)}" alt="Panel ${idx}" />`;
  updateInfo();
};

const flicking = new Flicking("#flick", {
  renderOnlyVisible: true,
  align: "prev",
  bound: true,
  preventDefaultOnDrag: true
});

flicking.on("ready", e => {
  e.currentTarget.visiblePanels.forEach(loadImage);
});

flicking.on("visibleChange", e => {
  e.added.forEach(loadImage);
});

Open Sandbox

React

import Flicking from "@egjs/react-flicking";
import "@egjs/react-flicking/dist/flicking.css";
import "./styles.css";
import { useCallback, useState } from "react";

const TOTAL = 100;
const COLORS = ["#e74c3c", "#3498db", "#2ecc71", "#f39c12", "#9b59b6"];
const getImageUrl = i => `https://picsum.photos/seed/${i}/250/180`;

export default function App() {
  const [loadedSet, setLoadedSet] = useState(new Set());
  const [loadedCount, setLoadedCount] = useState(0);

  const handleVisibleChange = useCallback(e => {
    setLoadedSet(prev => {
      const next = new Set(prev);
      e.added.forEach(panel => next.add(panel.index));
      const newCount = next.size;
      setLoadedCount(newCount);
      return next;
    });
  }, []);

  const handleReady = useCallback(e => {
    const visiblePanels = e.currentTarget.visiblePanels;
    setLoadedSet(prev => {
      const next = new Set(prev);
      visiblePanels.forEach(panel => next.add(panel.index));
      setLoadedCount(next.size);
      return next;
    });
  }, []);

  return (
    <div>
      <Flicking
        renderOnlyVisible={true}
        align="prev"
        bound={true}
        preventDefaultOnDrag={true}
        onReady={handleReady}
        onVisibleChange={handleVisibleChange}
      >
        {Array.from({ length: TOTAL }, (_, i) => (
          <div className="flicking-panel" key={i} style={{ background: COLORS[i % COLORS.length] }}>
            {loadedSet.has(i) ? (
              <img src={getImageUrl(i)} alt={`Panel ${i}`} />
            ) : (
              <div className="placeholder">Panel {i}</div>
            )}
          </div>
        ))}
      </Flicking>
      <div className="info-bar">
        Images loaded: {loadedCount} / {TOTAL}
        (only visible panels are loaded)
      </div>
    </div>
  );
}

Open Sandbox

Vue@3

<template>
  <div>
    <Flicking
      :options="{ renderOnlyVisible: true, align: 'prev', bound: true, preventDefaultOnDrag: true }"
      @ready="onReady"
      @visible-change="onVisibleChange"
    >
      <div
        v-for="i in TOTAL"
        :key="i - 1"
        class="flicking-panel"
        :style="{ background: COLORS[(i - 1) % COLORS.length] }"
      >
        <img
          v-if="loadedSet.has(i - 1)"
          :src="getImageUrl(i - 1)"
          :alt="'Panel ' + (i - 1)"
        />
        <div v-else class="placeholder">Panel {{ i - 1 }}</div>
      </div>
    </Flicking>
    <div class="info-bar">
      Images loaded: {{ loadedCount }} / {{ TOTAL }}
      (only visible panels are loaded)
    </div>
  </div>
</template>

<script setup>
import Flicking from "@egjs/vue3-flicking";
import { ref } from "vue";
import "@egjs/vue3-flicking/dist/flicking.css";

const TOTAL = 100;
const COLORS = ["#e74c3c", "#3498db", "#2ecc71", "#f39c12", "#9b59b6"];
const getImageUrl = i => `https://picsum.photos/seed/${i}/250/180`;

const loadedSet = ref(new Set());
const loadedCount = ref(0);

const onReady = e => {
  e.currentTarget.visiblePanels.forEach(panel => {
    loadedSet.value.add(panel.index);
  });
  loadedCount.value = loadedSet.value.size;
};

const onVisibleChange = e => {
  e.added.forEach(panel => {
    loadedSet.value.add(panel.index);
  });
  loadedCount.value = loadedSet.value.size;
};
</script>


<style>

.flicking-viewport.vertical {
  display: block;
  width: 100%;
}

.flicking-panel {
  width: 200px;
  height: 150px;
  margin-right: 10px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  color: white;
}

.panel-1 { background: #3e8ed0; }
.panel-2 { background: #00d1b2; }
.panel-3 { background: #f14668; }
.panel-4 { background: #ffe08a; color: #333; }
.panel-5 { background: #48c78e; }

.demo-container {
  margin-bottom: 24px;
}

.demo-label {
  font-weight: bold;
  margin-bottom: 8px;
  color: #666;
}

.button {
  padding: 8px 16px;
  margin: 4px;
  border: 2px solid #3498db;
  background: transparent;
  color: #3498db;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.button:hover {
  background: #3498db;
  color: white;
}

.controls {
  display: flex;
  justify-content: center;
  margin-top: 16px;
  gap: 8px;
}

.flicking-panel {
  width: 250px;
  height: 180px;
  margin-right: 10px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
  color: white;
  position: relative;
  overflow: hidden;
}

.flicking-panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.flicking-panel .placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #ddd;
  color: #999;
  font-size: 14px;
}

.info-bar {
  margin-top: 12px;
  padding: 8px 12px;
  background: #f5f5f5;
  border-radius: 4px;
  font-size: 14px;
  color: #333;
}

</style>

Open Sandbox

요약

주요 옵션/이벤트

항목	타입	기본값	설명
renderOnlyVisible	boolean	false	보이는 패널만 렌더링
visibleChange	VisibleChangeEvent	-	화면에 보이는 패널이 변경될 때 발생

이벤트 속성

속성	타입	설명
added	Panel[]	새로 화면에 진입한 패널
removed	Panel[]	화면에서 벗어난 패널
visiblePanels	Panel[]	현재 화면에 보이는 패널 전체

동작 비교

방식	이미지 로드 시점	적합한 상황
일반 로딩	모든 패널 한 번에 로드	패널이 적을 때 (10개 이하)
Lazy 로딩	화면에 진입할 때 로드	패널이 많을 때 (수십~수백 개)

상세 설명

동작 원리

1. renderOnlyVisible: true로 보이는 패널만 렌더링
2. visibleChange 이벤트의 added 배열에서 새로 보이는 패널 감지
3. 해당 패널의 이미지를 로드하고, 로드 여부를 기록
4. 한번 로드된 이미지는 다시 로드하지 않음 (Set으로 추적)

초기 로드

Flicking이 초기화된 직후에는 visibleChange가 아직 발생하지 않으므로, ready 이벤트에서 초기 visible 패널의 이미지를 로드해야 합니다.

연관 옵션

• renderOnlyVisible과의 관계: 이 옵션이 핵심. 보이지 않는 패널의 렌더링을 생략하여 DOM 부담을 줄임
• bound와의 관계: bound: true와 함께 쓰면 끝에서 빈 공간 없이 자연스러운 스크롤 가능
• align과의 관계: align: "prev"로 리스트형 레이아웃에 적합

사용 시나리오

언제 사용하나요?

• 대량 이미지가 포함된 갤러리 (50개 이상)
• 무한 스크롤 피드에서 이미지 최적화
• 모바일 환경에서 네트워크 부담 경감

주의사항

주의

• renderOnlyVisible은 프레임워크(React, Vue) 환경에서 사용을 권장합니다
• visibleChange 이벤트의 added 패널은 Panel 객체이며, index 속성으로 식별할 수 있습니다
• 초기 로드 시 ready 이벤트에서 별도로 visible 패널을 처리해야 합니다

관련 링크

관련 옵션

• renderOnlyVisible: 보이는 패널만 렌더링
• bound: 경계 제한

관련 데모

• Render Only Visible: renderOnlyVisible 옵션 자체의 on/off 비교
• Virtual Scroll: virtual 모드를 사용한 대량 패널 처리