使用 ReactiveX 进行渐进式图像加载

Posted 2023-03-10

【中文标题】使用 ReactiveX 进行渐进式图像加载

【英文标题】：Progressive image loading with ReactiveX

【发布时间】：2017-04-18 13:14:45

【问题描述】：

我正在尝试加载缩小的预览图片，然后加载hires图片。我想确保如果 hires 图片首先加载，preview 图片会被丢弃。

考虑以下示例，其中：

序列 1 是预览图像请求 序列 2 是雇用图像请求 序列3是组合序列 序列 4 是生成的图像渲染序列

.

Example 1:

 1    ------P-------
 2    ---------H----

 3    ------P--H----

 4    ------*--*----


Example 2:

 1   ----H---------
 2   --------P-----

 3   ----H|--------

 4   ----*|--------

到目前为止，我想出的唯一解决方案是保存一个状态变量，该变量表示是否已经加载了员工并使用 takeWhile，但这需要一些不优雅的操作，并且还涉及副作用。

我正在寻找正确的 RX 方法。

【参考方案1】：

你可以在不保存状态和使用变量的情况下做到这一点：

Observable<Bitmap> hiresObservable = getHiresObservable()
        .share()
Observable<Bitmap> previewObservable = getPreviewObservable()
        .takeUntil(hiresObservable);


Observable.merge(previewObservable, hiresObservable)
      .subscribe(bitmap -> 
           //do something with the bitmap
      );

这与answer 非常相似。

【讨论】：

因为否则您将订阅两次您不想要的hiresObservable，共享“多播”您的Observable，这样多个订阅将看到相同的值，实际上您可能需要更加小心并使用其他 'multicast' 运算符以防止竞争（例如，如果您雇用有缓存），您可以在此处阅读我的解释：***.com/a/42826568/3903847