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
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ć