添加自定义加载程序以实现反应流畅的轮播

Question

我有一个客户端渲染的反应灵巧的轮播。在光滑设置中传递lazyloading = true时，延迟加载的功能可以正常工作。 图像被延迟加载。 但是，我需要在加载图像之前显示一个加载器。

我尝试将加载程序添加到src中，并将实际路径添加到data-src中。但是它加载加载器而不加载图像。我一直在寻找一种实现相同方法的方法.react组件的渲染中有以下代码。当我直接将imageUrl传递给src时，它会延迟加载图像。

    <img 
        src="/gfx/img-throbber.gif" 
        className="b-lazy" 
        data-lazy={item.image} 
        data-src={imageUrl}>
    />

我希望图像能够被延迟加载，并且如果轮播幻灯片可见，则会显示一个加载器，并等待图像被渲染。