javascript - 在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 后使用 promises 和 resolve，现在不检查错误。

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

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

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

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

这是我传递图片 url 的方式:

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);
});}

在此之后，即使在离线状态下，我也能够在其他页面上加载图像。