import { createEffect, createSignal } from "solid-js";
import "./LazyImage.tsx.scss";
interface LazyImageProps {
  placeholder?: string;
  class?: string;
  src: string;
  alt: string;
}

export default function LazyImage(props: LazyImageProps) {
  const [source, setSource] = createSignal(props.placeholder ?? props.src);
  const [loading, setLoading] = createSignal(props.placeholder ? true : false);

  let el: HTMLImageElement | undefined;

  createEffect(() => {
    if (el && el.complete) {
      el.src = source();
      el.onload = () => {
        setLoading(false);
      };
    }
  });

  const onLoad = () => {
    setSource(props.src);
  };

  return (
    <img
      classList={{ lazy: loading() }}
      class={props.class}
      ref={el}
      src={source()}
      onLoad={onLoad}
      alt={props.alt}
      draggable="false"
      loading="lazy"
    />
  );
}

import { createEffect, createSignal } from "solid-js";
import "./LazyImage.tsx.scss";
interface LazyImageProps {
  placeholder?: string;
  class?: string;
  src: string;
  alt: string;
}

export default function LazyImage(props: LazyImageProps) {
  const [source, setSource] = createSignal(props.placeholder ?? props.src);
  const [loading, setLoading] = createSignal(props.placeholder ? true : false);

  let el: HTMLImageElement | undefined;

  createEffect(() => {
    if (el && el.complete) {
      el.src = source();
      el.onload = () => {
        setLoading(false);
      };
    }
  });

  const onLoad = () => {
    setSource(props.src);
  };

  return (
    <img
      classList={{ lazy: loading() }}
      class={props.class}
      ref={el}
      src={source()}
      onLoad={onLoad}
      alt={props.alt}
      draggable="false"
      loading="lazy"
    />
  );
}