关于react lazyload滚动时没有加载图片的问题

xiaolu_2550 2016-08-03 03:43:28

我在做网站的lazyload功能，现在遇到一些问题是：一共有12张图片，进入页面的时候加载了5张，在往下滚动的时候理应下载图片，但是没有实现。我贴一下代码

上面引用（import LazyLoad from 'react-lazyload';）。
下面访问页面的时候

加载了5张图片，

剩下的是上面的样子
往下滚动的时候也是这个样子，没有加载图片。为什么页面没有重新渲染呢？

...全文

1007 3 打赏收藏转发到动态举报

写回复

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

亚卡卡的那年 2019-07-04

打赏
举报

回复

组件需要加scroll属性

lsscb11238023 2017-02-07

打赏
举报

回复

楼主你好，这个问题我也遇到了，你后来怎么解决的，方便说下问题所在吗？

allen_alibaba 2016-08-21

打赏
举报

回复

貌似碰到相同的问题

React惰性负载组件 React Lazy Load是易于使用的React组件，可帮助您以可预测的方式推迟加载内容。它速度很快，可在IE8 +中运行，最小化为6KB，默认情况下使用去抖动功能。您还可以在滚动容器内使用组件，例如带有滚动条的div。它会自动找到。看看一个例子。安装 React Lazy Load需要React 0.14或更高版本。 npm install --save react-lazy-load 例子用法 import React from 'react' ; import LazyLoad from 'react-lazy-load' ; const MyComponent = ( ) => ( < div> Scroll to load images. < div xss=removed> < La

React本地延迟加载一个lazyload组件适合于React Native。安装 npm install react-native-lazyload 成分成分描述 LazyloadScrollView 基于ScrollView lazyload容器组件 LazyloadListView 基于ListView lazyload容器组件 LazyloadView 基于View组件。该组件的内容不会滚动到视线中呈现。它应该位于LazyloadScrollView或LazyloadListView内部，该name与该组件的主机LazyloadListView同名。 LazyloadImage 基于图像组件。图像内容不会滚动到视线中呈现。它应该在LazyloadScrollView或LazyloadListView内部，该name与该组件的主机LazyloadListVi

关于ReactFacebook在开发Instagram时打造形成并于2013年5月开源，文档健全，生态完整，与尤雨溪的Vue各领前端半边天下；React灵活和便于自定义，在全球市场占有率独占鳌头；大型自研项目考虑到后期的扩展和自定义往往会选择使用React作为技术栈；React与Vue在框架设计上有极高的相似度，上手React以后，我们可以轻松过渡到Vue的学习；课程特色零基础教学，由浅入深，轻松诙谐，物超所值；课程包含Hook、Redux和React-Router-Dom最新版内容，即所谓【React全家桶开发】；含京东商城管理后台完整项目从零到一开发过程；附完整课程源码；附React高频面试题30道，OFFER轻松斩获；课程收益掌握React的框架基础知识；掌握React全家桶项目开发+打包全流程；掌握React高频面试题回答技巧；写在最后就连太阳光照到地球都需要8分钟，所以，你也需要时间，耐心一点，持续修炼。

react-lazy-load, 当子元素进入viewport时，响应它们呈现子元素延迟加载组件反应延迟加载很容易使用响应组件，它帮助你以可以预测的方式延迟加载内容。速度快，工作在 IE8+，6KB 缩小，在默认情况下使用去抖功能。你还可以在滚动容器中使用组件，如带滚动条的div 。它会自动找到。查看一个

React惰性负载 React Lazy Loading - 很容易与 React 集成到 Lazyload 组件、图像等。它会监视元素并告诉您元素何时进入视口。这样可以在视口中的组件和初始加载减少时执行任何操作。实现“无限滚动”网站，在您滚动时加载和呈现越来越多的内容，这样用户就不必翻阅页面。内部使用的 :collision: :collision: :collision: 多选下拉菜单的React库。 :collision: :collision: :collision: 特征 :headphone: 钩子或组件- 使用useVisibilityHook可以更轻松地监视元素和执行任何操作。 :fire: 性能- 没有用于滚动、调整大小等的多个侦听器。 :flashlight: 捆绑包- 重量轻，~3.5kb :wrapped_gift: 功能- forceVisible ， forceCheck手动执行操作。 :collision: 内存优化- 一旦组件到达视口/卸载，观察者将断开连接安装 React Lazy Load 需要 React v16.

87,907

社区成员

224,614

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章