Instagram 如何在帖子屏幕上如此快速地显示图库图像？

Question

在我用 Reactnative 开发的项目中，我尝试使用 CameraRoll 用平面列表显示图库图像。但是，第一次加载时会出现轻微的延迟，并且当我们滚动时，加载图像时会出现延迟。随着图像数量的增加，等待时间也会增加。

然而，在 Instagram 上，图像是直接加载的，无论我们滚动多快，都不存在延迟加载。 Instagram 是如何做到这一点的？

export default function TestScreen() {
    const [assets, setAssets] = useState([]);

    useEffect(() => {
        prepare();
    }, []);

    prepare = async () => {
        let res = await CameraRoll.getPhotos({ first: 2000, after: null, assetType: 'All', include: ['albums'] });
        let list = [];
        if (res.edges && res.edges.length > 0) {
            res.edges.map(item => {
                let image = item.node.image;
                let galleryImage = { uri: image.uri, group: item.node.group_name };
                list.push(galleryImage);
            });
            setAssets(list);
        }
    }

    const GetItem = (item) => {
        return <Image
            key={'Key_' + item.uri}
            source={{ uri: item.uri }}
            style={{ backgroundColor: '#242424', width: '20%', height: 75, borderColor: '#ffffff', borderWidth: .5 }} />
    }

    return (
        <SafeAreaView style={styles.container}>
            <View style={styles.playground}>
                {
                    (assets) ?
                        <FlatList
                            numColumns={5}
                            horizontal={false}
                            data={assets}
                            keyExtractor={item => 'key_' + item.uri}
                            renderItem={item => GetItem(item.item)}
                        />
                        :
                        <ActivityIndicator size="small" />
                }
            </View>
        </SafeAreaView>
    );
}

Answer 1

您可以尝试以下一些方法：-

1。缓存图像

使用像react-native-fast-image这样的库来缓存图像并缩短图像获取时的加载时间。虽然，这也可能带来数据无法正确重新加载的挑战，但这种情况不应该发生太多。

2。使用虚拟化

虚拟化是加载长列表并优化它们的一个大概念。尝试获取较少的图像并虚拟化列表以减少绘制时间。

3.更好的服务器

尽管 Instagram 确实采用了与众所周知的加载图像算法不同的算法，但它们的服务器能力也与速度有很大关系。因此，如果您真的想那么快，您可能需要升级您的服务器。