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

Question

• 请查看下面的 EDIT 3，因为我发现这不是 React 的问题，而是浏览器的 chaching 机制的问题。

我正在尝试创建一个应用程序，该应用程序可以从给定的图像 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;
        });
    }
}

我知道一旦加载了所有 url，我就可以使用 Promise 并解决，现在不检查错误。

这是我的组件使用从上面的模块中检索到的图像更新状态的地方：

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

每次重新加载图像时，当我单击下一个或上一个按钮（看下面的屏幕截图）时会发生什么，我不明白为什么。

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

这是我传递图片网址的方式：

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 个图片请求。尝试取消选中network 选项卡中的disable cache 选项。