React Native 渲染图片的两种方式 - 简书
React Native 渲染图片的两种方式
React Native 可以渲染网络图片，也可以渲染本地图片。
渲染网络图片
渲染网络图片的方式相对比较简单，通过uri就可以渲染
&Image style={styles.logo}
source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}} /&
渲染本地图片
渲染本地图片的方式分为两步：
首先需要在原生平台的开发工具中加入静态图片资源：
IOS平台需要在xcode中引入静态图片1x、2x、3x；
Android平台需要在src\main\res\drawable中加入图片资源。
然后通过require(image!name)的方式进行引入。
name是指图片资源的名字，不包括扩展名！
&Image style={styles.icon} source={require('image!myIcon')} /&
如：我在资源文件中加入了a.jpg
Paste_Image.png
我要在使用它，可以这样：
&Image source={require('image!a')} style={styles.image}&&/Image&
效果如下：
Paste_Image.png
参考文档：
Coding is 用智慧开创属于自己的事业！
联系邮箱：
用两张图告诉你，为什么你的 App 会卡顿? - Android - 掘金Cover 有什么料？ 从这篇文章中你能获得这些料： 知道setContentView()之后发生了什么？ ... Android 获取 View 宽高的常用正确方式，避免为零 - 掘金相信有很多朋友...
用两张图告诉你，为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料？ 从这篇文章中你能获得这些料： 知道setContentView()之后发生了什么？ ... Android 获取 View 宽高的常用正确方式，避免为零 - 掘金 相信有很多...
React Native优秀博客，以及优秀的Github库列表（很多英文资料源自于[awesome-react-native](https://github.com/jondot/awesome-react-native)） 关于开源库类 - Star 100+ ? - S...
来源：开源中国ID：oschina2013点击查看原文 React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在201...
更新： 跨平台数据库开发组件： https://github.com/andpor/react-native-sqlite-storage 生成二维码： https://github.com/cssivision/react-native-qrcode 生成...
2008年开始，北京房价开始疯涨。不少自称理智派放言说，这么高的房价我绝对不会买，土地只会越来越少，而买房的人一定程度上是恒定的。按这个道理我觉得房价肯定跌。 十年快过去了，北京的房子还是居高不下。买了的人后悔没有多买一套或者后悔买小了。没买的人或者在犹豫或者已然买不起。 ...
日 今天去体检中心做了个大体检，从早上7点15到下午2点多中午都没停过，一共做了30多项的检查。还包括了CT。核磁已经排到了4月份了。 随着各种途径的宣传也好，还有我们每个人周围都会有几个身体出现问题的人。现在已经引起了国家的重视。人们也已经开始意识到养生...
很多人说：看男人品味，先看他鞋子。 无数人将其奉为真理，穿上价值不菲的鞋后，恨不得在光滑地板上摩擦摩擦。 若有人说：看女人品味，先看她的包。 无数直男癌嗤之以鼻：奢侈品都是交智商税的！ 先不管智商税贵不贵，必须承认的是，当代人快速判断对方阶层时，会先看穿着，尤其是先看包，当...
众所周知，我是一个不太接电话的人。 不接电话是一种传染病。真的，不开玩笑。 我患上这种病不是偶然。每一种怪病都是长期在不良环境中孕育而出的。并非是我强行找借口，大多数东西都得立体化来思考，一味着眼于本体上就会有失偏颇。 比如说狮子群，雄狮的懒都是惯出来的，除了充当门面，偶尔...768 人阅读
标签：至少1个，最多5个
文章同步于
最近在做React 图片懒加载的，原本以为比较简单，轻轻松松就能搞定，结果碰到了一系列的问题，可谓是一波三折，不过经过这次折腾，对图片懒加载及相关的实现有了更深刻的了解，特此记录一下。
一开始的时候，没打算自己造轮子。直接在网上搜索到了 react-lazyload 的库，用上以后，demo测试也没问题，可是在商品列表却没生效。于是直接去看源码找原因。
图片懒加载一般涉及到的流程为：滚动容器 -& 绑定事件 -& 检测边界 -& 触发事件 -& 图片加载
import React from 'react';
import ReactDOM from 'react-dom';
import LazyLoad from 'react-lazyload';
import MyComponent from './MyComponent';
const App = () =& {
&div className="list"&
&LazyLoad height={200}&
&img src="tiger.jpg" /& /*
Lazy loading images is supported out of box,
no extra config needed, set `height` for better
experience
&/LazyLoad&
&LazyLoad height={200} once &
/* Once this component is loaded, LazyLoad will
not care about it anymore, set this to `true`
if you're concerned about improving performance */
&MyComponent /&
&/LazyLoad&
&LazyLoad height={200} offset={100}&
/* This component will be loaded when it's top
edge is 100px from viewport. It's useful to
make user ignorant about lazy load effect. */
&MyComponent /&
&/LazyLoad&
&LazyLoad&
&MyComponent /&
&/LazyLoad&
ReactDOM.render(&App /&, document.body);
滚动容器及绑定事件
react-lazyload 有一个props为 overflow，默认为false。
if (this.props.overflow) { // overflow 为true，向上查找滚动容器
const parent = scrollParent(ReactDom.findDOMNode(this));
if (parent && typeof parent.getAttribute === 'function') {
const listenerCount = 1 + (+parent.getAttribute(LISTEN_FLAG));
if (listenerCount === 1) {
parent.addEventListener('scroll', finalLazyLoadHandler, passiveEvent);// finalLazyLoadHandler 及passiveEvent 见下面
parent.setAttribute(LISTEN_FLAG, listenerCount);
} else if (listeners.length === 0 || needResetFinalLazyLoadHandler) {
// 否则直接绑定window
const { scroll, resize } = this.
if (scroll) {
on(window, 'scroll', finalLazyLoadHandler, passiveEvent);
if (resize) {
on(window, 'resize', finalLazyLoadHandler, passiveEvent);
通过源码可以看到，这里当 overflow 为true时，调用 scrollParent 获取滚动容器，否者直接将滚动事件绑定在 window。
scrollParent 代码如下：
* @fileOverview Find scroll parent
export default (node) =& {
if (!node) {
return document.documentE
const excludeStaticParent = node.style.position === 'absolute';
const overflowRegex = /(scroll|auto)/;
let parent =
while (parent) {
if (!parent.parentNode) {
return node.ownerDocument || document.documentE
const style = window.getComputedStyle(parent); //获取节点的所有样式
const position = style.
const overflow = style.
const overflowX = style['overflow-x'];
const overflowY = style['overflow-y'];
if (position === 'static' && excludeStaticParent) {
parent = parent.parentN
if (overflowRegex.test(overflow) && overflowRegex.test(overflowX) && overflowRegex.test(overflowY)) {
parent = parent.parentN
return node.ownerDocument || node.documentElement || document.documentE
这段代码比较简单，可以看到，scrollParent 默认是迭代向上查找 parentNode 样式的 overflow ，直到找到第一个 overflow 为 auto 或 scroll 的节点。然后返回该节点，作为滚动容器。
看到这里，我就基本知道商品列表懒加载无效的原因了，react-lazyload 仅支持 overflow 的滚动方式，而商品列表由于特殊原因，选用了 transform 的滚动方式。那是否有必要对其进行一下改造呢？接下来，我们继续往下看。
passiveEvent
上面的 passiveEvent 如下，在您的触摸和滚轮事件侦听器上设置 passive 选项可提升滚动性能。
// if they are supported, setup the optional params
// IMPORTANT: FALSE doubles as the default CAPTURE value!
const passiveEvent = passiveEventSupported ? { capture: false, passive: true } :
详细可以参考：
这里对 scroll 事件的回调函数 finalLazyLoadHandler 进行了节流或去抖的处理，时间是300毫秒。看起来还不错。
if (!finalLazyLoadHandler) {
if (this.props.debounce !== undefined) {
finalLazyLoadHandler = debounce(lazyLoadHandler, typeof this.props.debounce === 'number' ?
this.props.debounce :
delayType = 'debounce';
} else if (this.props.throttle !== undefined) {
finalLazyLoadHandler = throttle(lazyLoadHandler, typeof this.props.throttle === 'number' ?
this.props.throttle :
delayType = 'throttle';
finalLazyLoadHandler = lazyLoadH
lazyLoadHandler 如下：
const lazyLoadHandler = () =& {
for (let i = 0; i & listeners. ++i) {
const listener = listeners[i];
checkVisible(listener); //检测元素是否可见，并设置组件的props：visible
// Remove `once` component in listeners
purgePending(); //移除一次性组件的监听
这里大家千万不要被函数方法名 checkVisible 给迷惑，这里绝仅仅做了函数名字面意义的事情，而是做了一大堆的事。包括检测是否可见，设置组件 props，更新监听list，还有 component.forceUpdate！也是够了。。。
* Detect if element is visible in viewport, if so, set `visible` state to true.
* If `once` prop is provided true, remove component as listener after checkVisible
{React} component
React component that respond to scroll and resize
const checkVisible = function checkVisible(component) {
const node = ReactDom.findDOMNode(component);
if (!node) {
const parent = scrollParent(node);
const isOverflow = component.props.overflow &&
parent !== node.ownerDocument &&
parent !== document &&
parent !== document.documentE
const visible = isOverflow ?
checkOverflowVisible(component, parent) :
checkNormalVisible(component);
if (visible) { //组件是否可见
// Avoid extra render if previously is visible
if (!component.visible) {
if (component.props.once) {
pending.push(component); //如果只触发一次，则放入pending的列表，然后在purgePending中移除监听
component.visible = //设置组件的props为true
component.forceUpdate(); //强制更新
} else if (!(component.props.once && component.visible)) {
component.visible =
if (component.props.unmountIfInvisible) {
component.forceUpdate();
检测组件滚动到可见位置的方法如下：
* Check if `component` is visible in overflow container `parent`
{node} component React component
{node} parent
component's scroll parent
* @return {bool}
const checkOverflowVisible = function checkOverflowVisible(component, parent) {
const node = ReactDom.findDOMNode(component);
let parentT
let parentH
({ top: parentTop, height: parentHeight } = parent.getBoundingClientRect());
} catch (e) {
({ top: parentTop, height: parentHeight } = defaultBoundingClientRect);
const windowInnerHeight = window.innerHeight || document.documentElement.clientH
// calculate top and height of the intersection of the element's scrollParent and viewport
const intersectionTop = Math.max(parentTop, 0); // intersection's top relative to viewport
const intersectionHeight = Math.min(windowInnerHeight, parentTop + parentHeight) - intersectionT // height
// check whether the element is visible in the intersection
({ top, height } = node.getBoundingClientRect());
} catch (e) {
({ top, height } = defaultBoundingClientRect);
const offsetTop = top - intersectionT // element's top relative to intersection
const offsets = Array.isArray(component.props.offset) ?
component.props.offset :
[component.props.offset, component.props.offset]; // Be compatible with previous API
return (offsetTop - offsets[0] &= intersectionHeight) &&
(offsetTop + height + offsets[1] &= 0);
看起来好像代码比较多，其实核心方法就一个：getBoundingClientRect() 。Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。
通过 getBoundingClientRect 方法获取组件的滚动位置（top height等），然后经过一系列计算，就可以判断组件是否已经鼓动到合适的位置上了。
至此，react-lazyload 的代码我们已经大致看完了，总结一下这个库的缺点吧：
代码质量一般
只能够使用 overflow 滚动
直接修改组件的props：component.visible = 违背React原则，太暴力
使用 component.forceUpdate() ，在滚动列表长，滚动速度快的时候，可能会有性能隐患
getBoundingClientRect 性能不太好
LazyLoad 是一个快速的，轻量级的，灵活的图片懒加载库，本质是基于 img 标签的 srcset 属性。
&img alt="..."
data-src="../img/JJ_15_a.jpg"
width="220" height="280"&
Javascript
var myLazyLoad = new LazyLoad();
滚动容器及回调
入口文件，这里主要是 this._setObserver 方法和 this.update 方法。
var LazyLoad = function LazyLoad(instanceSettings, elements) {
this._settings = _extends({}, defaultSettings, instanceSettings);
this._setObserver();
this.update(elements);
_setObserver 方法，核心是执行 new IntersectionObserver() 。
IntersectionObserver 是浏览器原生提供的构造函数，接受两个参数：onIntersection 是可见性变化时的回调函数，option是配置对象（该参数可选）。
构造函数的返回值 this._observer 是一个观察器实例。实例的 observer 方法可以指定观察哪个 DOM 节点。
onIntersection 回调用于在图片可见时设置 src 加载图片。
下面可以看到，滚动容器默认为 ducument，否则需手动传一个 DOM 节点 进来。
_setObserver: function _setObserver() {
var _this =
if (!("IntersectionObserver" in window)) { // IntersectionObserver 方法不存在，直接返回
var settings = this._
var onIntersection = function onIntersection(entries) {
entries.forEach(function (entry) {
if (entry.intersectionRatio & 0) { // intersectionRatio：目标元素的可见比例，即intersectionRect占boundingClientRect的比例，完全可见时为1，完全不可见时小于等于0
var element = entry.
revealElement(element, settings); // 设置img的src
_this._observer.unobserve(element); // 停止观察
_this._elements = purgeElements(_this._elements);
this._observer = new IntersectionObserver(onIntersection, { // 获取观察器实例IntersectionObserver对象
root: settings.container === document ? null : settings.container, // 滚动容器默认为document
rootMargin: settings.threshold + "px"
其中 revealElement 方法如下：
var revealElement = function revealElement(element, settings) {
if (["IMG", "IFRAME"].indexOf(element.tagName) & -1) {
addOneShotListeners(element, settings);
addClass(element, settings.class_loading);
setSources(element, settings); // 设置img的src
setData(element, "was-processed", true);
callCallback(settings.callback_set, element);
update 方法，获取需要懒加载的 img 元素，指定观察节点。
update: function update(elements) {
var _this2 =
var settings = this._
var nodeSet = elements || settings.container.querySelectorAll(settings.elements_selector); // 获取所有需要懒加载的的img元素
this._elements = purgeElements(Array.prototype.slice.call(nodeSet)); // nodeset to array for IE compatibility
if (this._observer) {
this._elements.forEach(function (element) {
_this2._observer.observe(element); // 开始观察
// Fallback: load all elements at once
this._elements.forEach(function (element) {
revealElement(element, settings);
this._elements = purgeElements(this._elements);
检测可见这里使用的是 IntersectionObserver 。
传统的实现方法是，监听到scroll事件后，调用目标元素（绿色方块）的 getBoundingClientRect() 方法，得到它对应于视口左上角的坐标，再判断是否在视口之内。这种方法的缺点是，由于scroll事件密集发生，计算量很大，容易造成性能问题。
目前有一个新的 IntersectionObserver API ，可以自动"观察"元素是否可见，Chrome 51+ 已经支持。由于可见（visible）的本质是，目标元素与视口产生一个交叉区，所以这个 API 叫做"交叉观察器"。
详细可见文章下面的参考。
下面的代码很好懂，无非就是将 data-src 的值赋给 src 而已，这样，图片就开始加载了。
var setSourcesForPicture = function setSourcesForPicture(element, settings) {
var dataSrcSet = settings.data_
var parent = element.parentN
if (parent.tagName !== "PICTURE") {
for (var i = 0, pictureC pictureChild = parent.children[i]; i += 1) {
if (pictureChild.tagName === "SOURCE") {
var sourceSrcset = getData(pictureChild, dataSrcSet);
if (sourceSrcset) {
pictureChild.setAttribute("srcset", sourceSrcset);
改懒加载库一共只有两百多行代码，且没有任何依赖。使用 IntersectionObserver 配合 data-src 也极大的提升了性能。不过缺点如下：
IntersectionObserver 兼容性不好，不支持 IntersectionObserver 的浏览器，直接一次性显示图片。
需要手动传容器组件，不能自己向上查找。
作为一个不轻易造轮子的程序员，最后我还是选用了
，不过添加 IntersectionObserver 的 polyfill。 顺便提一下，IntersectionObserver 的polyfill 也是基于 getBoundingClientRect 实现的。
然后将第一个库的 scrollParent 方法移植了过来，自动查找父节点的滚动容器，完美！
2 收藏&&|&&4
你可能感兴趣的文章
第一个我用的时候也出了问题，试一下第二个。
第一个我用的时候也出了问题，试一下第二个。
你可能感兴趣的文章
142 收藏，
分享到微博？
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。原文地址：
我过去经常会问：
　有没有一种方法去判断子类组件是否已经渲染完成？
答案当然是有的啦 &componentDidMount()，在react component 已经渲染完成时&就会调用&componentDidMount()方法
如果你对&&componentDidMount() 不太熟悉， 那么建议你去看看react组件的生命周期（），哪里每一个方法你早晚都会用到的。
稍微多了解一些，你会意识到提问者真的想要知道的是图片何时才算已经完成加载了，以react已经渲染了&img&标签为标准是不能拿来判断图片已经加载完成的。
让我们来建立几个简单的定义来理解rendered 和&loaded：rendered（也叫渲染完成）：react 已经把你的虚拟DOM元素转化到真实DOM元素中并和真实的DOM建立起连接。
loaded：指图片数据或者其他来自服务器端等远程客户端上的内容已经下载完成了（或者已经下载失败了）
如果你还不都清楚，简单的说，render 总是会在 load 之前
为什么要等待一个图片加载？
额， 也许当你的图片已经加载完了后你希望：
隐藏loading图标。
自动加载更多图片。
转化UI，使图片更加凸显。
或者其他理由
想要找出如何判断图片加载事件的方法，那么就接着往下读吧。
onLoad & onError
onload 和 onerror& &这两个属性以及可以正常的在DOM&img&标签上使用了（），react 要使用驼峰格式来获取这个事件，这也是onLoad&and&onError的来由。react的文档中已经提倡这么用了，但并没有讨论具体为什么要这么用（）
&所以你只要添加&onLoad&and&onError这两个事件在你的react &img&标签中就行了。如果还是不够清楚，那么看看下面的代码栗子吧！
Short Example
这里是一个关于使用 onLoad 事件的简短的栗子， 想看更多详细的关于如何显示loading图直到图标加载完成的栗子， 就看看作者的下一篇文章（）
下面的这个组件，&ImageWithStatusText， 加载一张图片和和显示一段文本：'loaded' 或者 'failed to load'
import React from 'react';
class ImageWithStatusText extends React.Component {
constructor(props) {
super(props);
this.state = { imageStatus: null };
handleImageLoaded() {
this.setState({ imageStatus: 'loaded' });
handleImageErrored() {
this.setState({ imageStatus: 'failed to load' });
render() {
src={this.props.imageUrl}
onLoad={this.handleImageLoaded.bind(this)}
onError={this.handleImageErrored.bind(this)}
{this.state.imageStatus}
export default ImageWithStatusT
它相当短吧。好好理解吧，希望对你们有用（这段话是译者瞎哔哔的）
阅读(...) 评论()[图片懒加载][Angular]使用Intersection Observer实现图片懒加载并在Angular中使用现如今Web应用的性能如今越来越重要，有一个影响页面加载的很重要因素就是图片，尤其是页面中有很多图片的时候。如果可能的话，对这些图片使用懒加载是坠吼的，也就是只有当用户滚动到图片位置时才去加载这张图片，这样做的确提升了页面的首次加载速度。对于移动端而言，这样也可以节约用户的流量。当前懒加载图片的方法要想知道当前是否需要加载一张图片，我们需要坚持当前页面可见范围内这张图片是否可见。如果是，则加载。检查方法：我们可以通过事件和事件处理器来监测页面滚动位置、offset值、元素高度、视窗高度并计算出这张图片是否在可见视窗内。但是，这样做也有几点副作用：- 由于所有的计算将在JS的主线程进行，因此可能会带来性能问题；- 每次执行滚动时，以上计算都会执行一遍，如果我们的图片在最底部的，无形间浪费了很多资源；- 如果页面中有很多图片，这些计算将会十分占用资源。一个更加现代化的解决方案最近我阅读了一个比较新的DOM API，。这个API提供了一种侦测元素与当前视窗相交的方法，同时当这个元素与视窗开始相交或者相离时可以触发执行一个回调函数。因此，我们就不需要在JS主线程中进行其他多余的计算。除了侦测元素与视窗是否相交之外，Intersection Observer API还可以侦测元素与视窗相交的百分比。只需要在创建一个intersection observer时的options中设置threshold参数。threshold参数接受一个0到1。当threshold值为0时意味着一旦元素的第一个像素出现在视窗中时，回调函数就会被触发，值为1时则是元素完全显示时才会触发回调函数。threshold也可以是一个由0到1之间的数组成的数组，这样每当图片与视窗相交范围达到这个值时，回调函数就会被触发。这里有一个案例，解释了threshold数组是如何工作的。总的来说，通过Intersection Observer API实现的懒加载主要包括以下几个步骤：创建一个intersection observer实例；通过这个实例可以观测到我们希望懒加载的元素的可见情况；当元素出现在视窗中，加载元素；一旦元素加载完成，则停止对他的观测；在Angular中，我们可以将这些功能放进一个指令里。将以上功能封装成一个Angular指令由于我们这里需要改变DOM元素，因此我们可以封装一个Angular指令作用于我们想懒加载的元素上。这个指令会有一个输出事件，这个事件会在元素出现在视窗后触发，在我们的场景下，这个事件是显示这个元素；import { Directive, EventEmitter, Output, ElementRef } from '@angular/core';
@Directive({
selector: '[appDeferLoad]'
export class DeferLoadDirective {
@Output() deferLoad: EventEmitter&any& = new EventEmitter();
private _intersectionObserver?: IntersectionObserver;
constructor(
private _elemRef: ElementRef,
创建一个intersection observer并开始观察元素组件视图初始化成功后，我们需要创建一个intersection observer实例，创建过程接受两个参数：- 一个元素与视窗相交百分比达标后触发的回调函数- 一个可选的对象optionsngAfterViewInit() {
this._intersectionObserver = new IntersectionObserver(entries =& {
this._chechForIntersection(entries);
this._intersectionObserver.observe(&Element&this._elemRef.nativeElement);
private _chechForIntersection(entries: IntersectionObserverEntry[]) {}
侦测，加载，取消观察回调函数_chechForIntersection()应该在侦测到元素与视窗相交后执行，包括向外emit一个方法deferLoad，取消观察元素，断开这个intersection observer。private _chechForIntersection(entries: IntersectionObserverEntry[]) {
entries.forEach((entry: IntersectionObserverEntry) =& {
if (this._checkIfIntersecting(entry)) {
this.deferLoad.emit();
// 取消观察元素，断开这个intersection observer
this._intersectionObserver.unobserve(this._elemRef.nativeElement);
this._intersectionObserver.disconnect();
private _checkIfIntersecting(entry: IntersectionObserverEntry) {
return entry.isIntersecting && entry.target === this._elemRef.nativeElement;
使用将directive在模块中导入，并在declarations中声明；&div
appDeferLoad
(deferLoad)="showMyElement=true"&
&my-element
*ngIf=showMyElement&
&/my-element&
这样就会给这个div加上延迟加载，并在显示后触发(deferLoad)中的方法。通过这个方法我们可以控制元素的显示隐藏总结完整的指令如下所示// defer-load.directive.ts
import { Directive, Output, EventEmitter, ElementRef, AfterViewInit } from '@angular/core';
@Directive({
selector: '[appDeferLoad]'
export class DeferLoadDirective implements AfterViewInit {
@Output() deferLoad: EventEmitter&any& = new EventEmitter();
private _intersectionObserver: IntersectionObserver;
constructor(
private _elemRef: ElementRef
ngAfterViewInit() {
this._intersectionObserver = new IntersectionObserver(entries =& {
this._checkForIntersection(entries);
this._intersectionObserver.observe(&Element&this._elemRef.nativeElement);
private _checkForIntersection(entries: IntersectionObserverEntry[]) {
console.log(entries);
entries.forEach((entry: IntersectionObserverEntry) =& {
if (this._checkIfIntersecting(entry)) {
this.deferLoad.emit();
// 取消观察元素，断开这个intersection observer
this._intersectionObserver.unobserve(this._elemRef.nativeElement);
this._intersectionObserver.disconnect();
private _checkIfIntersecting(entry: IntersectionObserverEntry) {
return (&any&entry).isIntersecting && entry.target === this._elemRef.nativeElement;
最后了最后了这个API还处于WD(working draft)阶段，对于不支持的浏览器例如IE全系列，EDGE15以下版本，我们仍需要使用文章开头提到的方案。当然，本文只是实现了一个Intersection onserver在Angular应用中的使用，同样你也可以在React，Vue等其他框架中使用，原理都是一样的。结束！哈！2添加评论分享收藏文章被以下专栏收录}