如何解决Reactjs如何在加载DOM之后延迟加载图像
我想使reactjs页面延迟加载图像。因此,我在componentDidMount()内部调用了lazyLoadImages()。我发现位于浏览器选项卡上的浏览器加载指示符始终一直旋转,直到加载完所有图像为止。。这使我认为我所做的操作不能提供真正的延迟加载图像体验。 / p>
有趣的事情是,如果我用不太短的超时参数(例如100ms(不是0甚至是50ms))将lazyLoadImages()包装在 setTimeout 中,页面加载指示器将很快停止旋转并消失,这让我感到在后台进程开始加载这些图像时页面DOM已完成。
我认为componentDidMount和window onload是相似的,但事实并非如此。通过使用窗口onload事件,我可以获得与使用setTimeout相同的体验。但是由于我的应用程序是SPA,因此onload事件不适合。因为onload事件仅在我明确刷新此页面时才起作用,而不能使用react-router在页面之间导航。
任何人都对这种现象有想法,而在不使用setTimeout函数的情况下该如何实现?
componentDidMount() {
setTimeout(this.lazyLoadCarouselImage,100);
// or invoke directly -> this.lazyLoadCarouselImage();
}
lazyLoadCarouselImage() {
let images = [];
let loadedCounter = 0;
let lazyLoadImageList = ['https://wallpaperaccess.com/full/637960.jpg','https://wallpaperaccess.com/full/637960.jpg']
for (let i=0; i<lazyLoadImageList.length; i++ ) {
images[i] = new Image();
images[i].onload = ()=> {
loadedCounter++;
if (loadedCounter == lazyLoadImageList.length) {
// update state here saying all images are loaded
}
}
images[i].src = lazyLoadImageList[i];
}
}
解决方法
有些libraries可以使用滚动和调整大小事件处理程序来处理延迟加载,而其他人则使用Intersection Observer API。查看Lazy-loading images了解详情。
如今,您只需将属性int g(int n)
{
if (n <= 1)
return 1;
return g(n / 2) + 1;
}
int f3(int n)
{
int counter = 0;
for (int i = 0; g(i) < n; ++i)
++counter;
return counter;
}
添加到每个loading="lazy"
元素中,就可以延迟加载图像。请记住,该功能是相当新的,因此请确保潜在用户正在使用up to date Browser。
下面是一个快速示例,其中我创建了100张“延迟加载”的图像:
<img>
class App extends React.Component {
render() {
let results = [];
for (let i = 0; i < 100; i++) {
results.push(
<img
key={`image${i}`}
src={`https://placehold.it/4${i < 10 ? `0${i}` : i }x4${i < 10 ? `0${i}` : i }`}
alt="placeholder"
width={`4${i < 10 ? `0${i}` : i }`}
height={`4${i < 10 ? `0${i}` : i }`}
loading="lazy"
/>
)
}
return (
<div style={{ width: '400px' }}>
{results}
</div>
)
}
}
ReactDOM.render(<App />,document.getElementById('root'));
注意:单击“运行代码段”,然后打开浏览器开发人员工具内的“网络”标签,开始滚动,并且当图像靠近视口时应注意如何加载图像。
,似乎对我有用
const [isLoaded,setIsLoaded] = useState(false);
const [isPageLoaded,setIsPageLoaded] = useState(false); //this helps with lazy loading
useEffect(() => {
setIsLoaded(true);
},[]);
useEffect(() => {
if (isLoaded) {
setIsPageLoaded(true);
}
},[isLoaded]);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。