Leniwe ładowanie obrazków

Hej, w next.js chce podmienic img na Image, aby wykorzystac lazy load images, niestety w tym przypadku mi to nie działa bo zdj przychodzą roznych wielkosci, a Image wymaga width i height . Jak cos takiego ograc? Ewentulnie czy w next da rade zastosowac lazy loading dla img?. Prosze o pomoc.
https://codepen.io/olivier-mazur/pen/XWYdKVw

Jeżeli chcesz tylko lazy load to takie coś jest wbudowane w HTML od jakiegoś czasu:

<img src="" loading="lazy" alt="obrazek" />

zrobiłem cos takiego, ale zachowanie obrazkow jest troche inne niz przy tagu img

const [imageSize, setSmageSize] = useState({
    width: 1,
    height: 1
   });
   <Image
      src={photo}
      onLoadingComplete={target => {
      setSmageSize({
         width: target.naturalWidth,
         height: target.naturalHeight
        });
      }}
      width={imageSize.width}
      height={imageSize.height}
      className={`${styles[assignPhotoClass(photoSize)]} ${
                    photoDescription ? styles["photo-border"] : ""
       }`}
       alt={photoDescription}
       loader={() => photo}
       unoptimized={true}
       loading="lazy"
       />

@tabsy123 odpisuję jako post, bo komentarze są niewygodne i powinny być bardziej lużnym oderwaniem niż prawdziwą dyskusją

Mylisz lazy loading z zapobieganiem content jumping - to jedno.

Dodanie loading="lazy" to zawsze zysk jak chodzi o metryki i ogólną wydajność - to dwa.

Natomiast jeżeli chodzi o ten content jumping to jeżeli wraz z linkami do obrazków nie masz ich wymiarów no to wtedy lipa, nie zrobisz. W zależności od typu strony możesz się ratować rozwiązaniami typu przycinanie obrazków do wspólnych proporcji, sztywny wymiar albo sztywne proporcje dzięki aspect-ratio, a dopiero po powiększeniu pełny wymiar np. Ale to już musiałbym dokładnie wiedzieć jak wygląda to, co robisz

@tabsy123:

Czytasz i rozumiesz co ja w ogóle piszę? Bo poświęcam Ci mój czas za darmo, a Ty zdaje się to zlewasz. Odpisuj postami, nie komentarzem

Nadal nie odpowiedziałeś co znaczy "nie działa". I nadal mylisz lazy loading z content jumpingiem. Jeżeli nie umiesz zadać precyzyjnego pytania to nie dostaniesz precyzyjnej odpowiedzi - zapamiętaj to sobie na całe życie.

no chyba, ze uzytkownik by mi podawał wczesniej wymiary, ale tego sie nie da zrobic

https://stackoverflow.com/questions/67467439/how-to-render-images-of-unknown-dimensions-using-next-image-from-next-js, ale rozwiązania tego człowieka nie potrafię użyć

No to właśnie to rozwiązanie jest po to, żeby pobrać wymiar obrazka od użytkownika w momencie przesyłania obrazu na stronę. Nie wiem czy robisz tak samo, brzmi, że tak. Więc to rozwiązanie się sprawdzi (pomijając fakt, że nie należy ufać niczemu od użytkownika - więc powinieneś te wymiary sam na serwerze zweryfikować i zapisać).

Ale powyższe nie rozwiąże problemu już istniejących zdjęć - te musisz "przelecieć" jakimś skryptem i w bazie zapisać ich wymiary.

a loading=lazy nie tylko mi nie dziala

Ponownie - co to znaczy "nie działa".

Poza tym podałeś wątek z 2 września 2019. Chrome oficjalnie zaczął wspierać lazy loading od 10 września 2019 (8 dni po założeniu tematu). Żeby coś w pełni działało to trzeba kilku miesięcy na to, żeby użytkownicy poaktualizowali przeglądarki + technologie zaraz po wydaniu jeszcze mogą się kształtować. W tym wątku, co podlinkowałeś jest opisana różnica między Chrome a Firefoxem - Chrome robi to trochę "po swojemu".

A jako bonus dodam, że tak naprawdę to jak masz skopaną stronę, która np. nie pokazuje stylów choć przez chwilę, bo są np. dynamicznie wstrzykiwane, a pokazuje już treść to przeglądarka może "zauważyć" wtedy obrazek i zacząć go ładować, więc wtedy to też może być skopane :)

Uzytkownik podaje mi tylko size i na tej podstawie dodaje odpowiednią klasę dla zdjęcia. Lazy loading nie działa to znaczy, że jest np wrzuconych 10 zdj. Na erkanie(100vh) widoczne są 2 zdjęcia czyli powinno w networku załadowac najpierw 2zdj, a ładuje mi sie od razu 10zdj, zamiast tak jak powinno ze scrollem doładowywać reszte zdjęc.

to zrób tak, żeby użytkownik podawał pełny wymiar

Pewnie wszystkie zdjęcia się obok/pod sobą, i w momencie gdy mają wymiar 1x1 to wszystkie mieszczą się na ekranie (albo tuż ponad nim, bo Chrome ładuje je trochę wcześniej wg info ze stack overflow), potem może i pojawiają się dwa pierwsze, i wypychają resztę poza, ale ładowanie już się rozpoczęło.

dokładnie wszystkie zdjęcia są pod sobą, sprobuje tak jak piszesz, między zdjęciami załadować jakis wiekszy tekst i może wtedy to będzie działać. Dzięki

Raczej przerób dodawanie obrazków tak, żeby zapisywać sobie ich wymiary do bazy. To najlepsze co możesz zrobić