comdraft

Turn your work into drafts.

Turn your GitHub commits into tech blog drafts, then polish and publish them anywhere.

New draft

Editor preview

dev-note / image-lab

a8f2c91

feat: apply lazy image loading

+ const observer =
+   new IntersectionObserver(
+     onIntersect
+   );

From commit context to a story

Implementing lazy image loading with IntersectionObserver

Images now load starting with the ones on screen. This post covers how it was implemented and what to check.

AI draft · Review before publishing

Get started right away.

  1. 01

    Connect GitHub

    Sign in with your GitHub account.

  2. 02

    Repositories & commits

    Load your repository's commit history and pick commits.

  3. 03

    Write an AI draft

    Add a description of your commits to the prompt to generate a draft.

  4. 04

    Review, publish, and export

    Publish it on the site, or export it to use anywhere else.

A tech blogging habit

Start simply, generate drafts, and keep writing consistently.

Example

A sample repository and draft to show how the service works.

Selected commits

3 selected

dev-note / image-lab

Personal public repository · main

  • a8f2c91

    feat: apply lazy image loading

    src/components/LazyImage.tsx

    Detect viewport entry with IntersectionObserver

  • b74e3d0

    refactor: extract image loading hook

    src/hooks/useLazyImage.ts

    Extract the observing logic into a reusable hook

  • c19d5a2

    fix: disconnect observer on unmount

    src/hooks/useLazyImage.ts

    Call disconnect() in cleanup

Turn this history into one post

Draft editor

Draft awaiting review

HTMLMDPublish
ReactImage optimization

Implementing lazy image loading with IntersectionObserver

Why the change?

Instead of requesting every image at once, including off-screen ones, images now load as they enter the viewport.

How was it implemented?

IntersectionObserver detects when an image enters the viewport. The observing logic lives in a useLazyImage hook, and the observer is disconnected when the component unmounts.

TypeScript · cleanup

useEffect(() => {
  observer.observe(image);
  return () => {
    observer.disconnect();
  };
}, [image]);

What should you check?

Check that images appear correctly while scrolling and that observers are cleaned up once they leave the viewport. Actual performance gains need to be measured separately.

This draft was written by AI. Review the code and explanations before publishing.

Please read first

Please check these before creating a draft.

  1. 01

    Your code is sent to a third-party LLM API. We do not recommend using organization or private repositories.

  2. 02

    Do not send commits that contain sensitive code.

  3. 03

    Code in your commits is never stored anywhere on the site.