在javascript (React，Jquery)应用程序上预加载图像，加载两次图像

Question

• 请看下面的编辑3，因为我发现这不是React的问题，而是浏览器的聊天机制的问题。

我正在尝试创建一个应用程序，它从给定的图像url数组中创建一些简单的旋转木马。我编写了一个模块，帮助我在加载所有映像后调用回调，如下所示：

ImagesLoader.js

export default {
    // a module that loads an array of images urls and when completes
    // calls a callback with the images elements array

    load(imagesUrlsArray, callback){
        const imagesLoaded = [];
        imagesUrlsArray.map((url) => {
            const img = new Image();
            img.onload = () => {
                imagesLoaded.push(img);
                if(imagesUrlsArray.length === imagesLoaded.length){
                    callback(imagesLoaded);
                }
            };
            img.src = url;
        });
    }
}

我知道我可以使用承诺和解决一旦所有的urls加载，现在没有检查错误。

下面是我的组件用上面模块检索的图像更新状态的地方：

componentDidMount() {
    ImagesLoader.load(this.props.images, (loadedImages) => {
        const imagesStateData = this.calculateImagesStateData(loadedImages);
        this.setState(Object.assign({},
            imagesStateData,
            {
                loaded: true,
                loadedImages: loadedImages
            }
        ));
    });
}

当我单击下一个或上一个按钮(请看下面的屏幕截图)时，我不明白为什么每次再次加载图像。

这是我第一次用reactjs做这样的事情，jquery没有任何问题。

​

​

下面是我传递图像urls的方式：

export default class App extends Component {
  render() {

    var images = [
      "http://www.wallpapereast.com/static/images/excellent-love-quotes-wallpaper-hd.jpg",
      "http://www.wallpapereast.com/static/images/My-Samsung-Galaxy-S3-Wallpaper-HD-Landscapes1.jpg",
      "https://s-media-cache-ak0.pinimg.com/236x/58/01/02/5801020fea36221ffba33633f99a7d81.jpg",
      "http://www.wallpapereast.com/static/images/pier_1080.jpg",
      "http://www.wallpapereast.com/static/images/wallpaper-black-hd-hd-wallpapers.jpg",
      "http://1.bp.blogspot.com/-dvg12YJKaKg/UnVfkMke7jI/AAAAAAAAUaU/O86x5FMgEuk/s1600/longcat.gif"
    ];

    var settings = {
      autoPlay: true,
      arrows: true
    };

    return (
      <Layout>
        <ReactCarousel images={images} width={500} height={300} settings={settings}/>
      </Layout>
    );
  }
}

编辑:设法给出一个简短的例子。http://codepen.io/anon/pen/ObyRPX，我从构建这个示例中可以看出，如果我不使用ImageItem组件并呈现一个简单的<img src='image.src'/>元素，那么它工作得很好，所以我想我的问题是使用ImageItem组件。

编辑2:这是非常奇怪的http://codepen.io/anon/pen/eBpdjx在这里，我只是改变了它，使ImageItem呈现图像元素，而不是背景图像上的一个div，它的工作方式，如预期。谁能解释一下有什么区别吗？

编辑3：

显然，这不仅发生在react应用程序上，而且还发生在jquery应用程序上，请看这里：

http://codepen.io/anon/pen/VmvyPZ

同样，当我尝试将图像加载为css的背景图像属性时，浏览器不会缓存图像并加载两次。

Answer 1

我也面临着同样的问题。图像将再次加载，因为浏览器没有保存对已加载图像的引用。

我所做的就是创建一个全局数组并将所有图像推送到数组中。

现在，这个数组是全局的，浏览器必须维护这个数组，直到整个应用程序被销毁。

var allImages = [];

function loadImages(imageUrls) {
imageUrls.forEach((q) => {
    const img = new Image();
    img.src = q;
    allImages.push(img);
});}

在此之后，我能够在其他页面上加载图像，即使离线时也是如此。

Answer 2

Chrome在devtool中为一幅图像显示了2个图像请求。尝试取消选中disable cache选项卡中的network选项。

​

​