EM
в любой очередности
Size: a a a
2020 July 07
EM
я не говорю что это не реализуему, я говорю что есть особенность и нужно учитывать ее
e
дид маунт !== имедж онлад и наоборот
картинку можно засунуть в свой компонент у которого есть дидмаунт
EM
нужно в дид маунт смотреть ready state
K
на данный момент, я нашел эту статью, я думаю, что это должно сработать
K
на данный момент, я нашел эту статью, я думаю, что это должно сработать
ой, onLoad здесь
EM
ну ты просто адаптируй
EM
чтоб онлоад вешать только если картинка не загружена
EM
а если загружена то сразу нужны класс
EM
вообще это ударит по перформансу картинок, жто все начнет работать только после гидрации, к этому моменту юзер уже мог смотреть на загруженные картинки
EM
если конечно цель оптимищировать под мобилки то может нужно заморочится
🦜
на данный момент, я нашел эту статью, я думаю, что это должно сработать
инлайни пикчи 🙃
EM
function usePlaceholder() {
const [isPlaceholderImgLoaded, setPlaceholderImgLoadingStatus] = useState(
false
);
const setPlaceholderImgLoaded = useCallback(() => {
setPlaceholderImgLoadingStatus(true);
}, [setPlaceholderImgLoadingStatus]);
const placeholderRef = useRef();
useEffect(() => {
if (placeholderRef.current && placeholderRef.current.complete) {
setPlaceholderImgLoaded();
}
});
return { isPlaceholderImgLoaded, setPlaceholderImgLoaded, placeholderRef };
}
const [isPlaceholderImgLoaded, setPlaceholderImgLoadingStatus] = useState(
false
);
const setPlaceholderImgLoaded = useCallback(() => {
setPlaceholderImgLoadingStatus(true);
}, [setPlaceholderImgLoadingStatus]);
const placeholderRef = useRef();
useEffect(() => {
if (placeholderRef.current && placeholderRef.current.complete) {
setPlaceholderImgLoaded();
}
});
return { isPlaceholderImgLoaded, setPlaceholderImgLoaded, placeholderRef };
}
EM
вот такой код для проверки загрузки
EM
+ onLoad
EM
<img ref={placeholderRef} onLoad={setPlaceholderImgLoaded}
EM
что-то одно сработает
🦜
function usePlaceholder() {
const [isPlaceholderImgLoaded, setPlaceholderImgLoadingStatus] = useState(
false
);
const setPlaceholderImgLoaded = useCallback(() => {
setPlaceholderImgLoadingStatus(true);
}, [setPlaceholderImgLoadingStatus]);
const placeholderRef = useRef();
useEffect(() => {
if (placeholderRef.current && placeholderRef.current.complete) {
setPlaceholderImgLoaded();
}
});
return { isPlaceholderImgLoaded, setPlaceholderImgLoaded, placeholderRef };
}
const [isPlaceholderImgLoaded, setPlaceholderImgLoadingStatus] = useState(
false
);
const setPlaceholderImgLoaded = useCallback(() => {
setPlaceholderImgLoadingStatus(true);
}, [setPlaceholderImgLoadingStatus]);
const placeholderRef = useRef();
useEffect(() => {
if (placeholderRef.current && placeholderRef.current.complete) {
setPlaceholderImgLoaded();
}
});
return { isPlaceholderImgLoaded, setPlaceholderImgLoaded, placeholderRef };
}
ох бля
K
function usePlaceholder() {
const [isPlaceholderImgLoaded, setPlaceholderImgLoadingStatus] = useState(
false
);
const setPlaceholderImgLoaded = useCallback(() => {
setPlaceholderImgLoadingStatus(true);
}, [setPlaceholderImgLoadingStatus]);
const placeholderRef = useRef();
useEffect(() => {
if (placeholderRef.current && placeholderRef.current.complete) {
setPlaceholderImgLoaded();
}
});
return { isPlaceholderImgLoaded, setPlaceholderImgLoaded, placeholderRef };
}
const [isPlaceholderImgLoaded, setPlaceholderImgLoadingStatus] = useState(
false
);
const setPlaceholderImgLoaded = useCallback(() => {
setPlaceholderImgLoadingStatus(true);
}, [setPlaceholderImgLoadingStatus]);
const placeholderRef = useRef();
useEffect(() => {
if (placeholderRef.current && placeholderRef.current.complete) {
setPlaceholderImgLoaded();
}
});
return { isPlaceholderImgLoaded, setPlaceholderImgLoaded, placeholderRef };
}
spasibo bolshoe
e
так можно тупо проверять, если дидмаунт сработал знач уже всё ок и можно делать запрос картинки, до дидмаунта вместо картинки отдавать пустой квадрат, после дидмаунта картинку, это гарантированно выполнится уже в готовом доме и события онЛоад будет работать