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
- Rejestracja:ponad 2 lata
- Ostatnio:ponad rok
- Postów:15
0
edytowany 2x, ostatnio: Riddle
- Rejestracja:ponad 2 lata
- Ostatnio:ponad rok
- Postów:15
0
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"
/>
edytowany 1x, ostatnio: tabsy123
- Rejestracja:ponad 18 lat
- Ostatnio:16 dni
- Lokalizacja:Rzeszów
0
@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
problem jest tego typu 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ć
a chce użyć Image bo on ma w sobie loading=lazy, a loading=lazy nie tylko mi nie dziala gdy nie podaje width i height https://stackoverflow.com/questions/57753240/native-lazy-loading-loading-lazy-not-working-even-with-flags-enabled
- Rejestracja:ponad 18 lat
- Ostatnio:16 dni
- Lokalizacja:Rzeszów
1
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 :)
edytowany 1x, ostatnio: dzek69
- Rejestracja:ponad 2 lata
- Ostatnio:ponad rok
- Postów:15
0
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.
edytowany 4x, ostatnio: tabsy123
- Rejestracja:ponad 18 lat
- Ostatnio:16 dni
- Lokalizacja:Rzeszów
1
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.
imga nieImagez nexta. do samego lazy loadinguImagejest ci zbędny.onLoadingCompleteczy jakiekolwiek inne eventy w JS to już jest długo za późno na takie rzeczy - strona już się wyświetliła bez znajomości wymiarów.