使用 JS 或 CSS 一次加载所有背景图像？

Question

所以现在我有一个包含很多设施的列表。这些设施中的每一个都有一个 image 属性，它只是其图像文件的名称。例如，facility.image == 'YogisBarAndGrill'。在页面加载时，我通过 JSON 发送了一个字符串数组（图像名称），并尝试在显示页面和/或文本之前加载所有图像。

不幸的是，我所有的努力都没有效果，预加载不起作用。目前，以下内容在 document.ready() 之前执行

(function() {
  var imagesPath, serviceURL, urlSegs;
  urlSegs = window.location.pathname.split("/");
  serviceURL = imagesPath = '';
  if (urlSegs.length === 2) {
    serviceURL = urlSegs[1] + '_images';
    imagesPath = urlSegs[1] === 'places' ? 'images/logos/' : 'images/categories/';
    $.getJSON(serviceURL, function(imageNames) {
      var i, _results;
      _results = [];
      for (i in imageNames) {
        if (i < imageNames.length) {
          _results.push((new Image()).src = imagesPath + imageNames[i] + '.png');
        }
      }
      return _results;
    });
  }
}).call(this);

。每个列表图像的 css 如下所示： background-image: url('images/logos/YogisBarAndGrill.png')< /code> 或类似的东西。

无论如何 - 我上面发布的内容不起作用。不进行预加载。我想要实现的是立即显示所有图像或者更好的是让页面什么都不显示，直到所有图像加载完毕。

感谢您的帮助！

Answer 1

当您说预加载“不起作用”时，您的意思是什么？您预计会发生什么？

“预加载”的意思是“在需要之前加载”。如果具有这些背景图像的 HTML 元素与您正在使用的 JavaScript 位于同一页面上，那么浏览器将在解析 CSS 后立即下载它们，这在 JavaScript 停止运行后不太可能持续很长时间。

Answer 2

您可以通过为要加载的每个图像动态创建 元素来完成此操作，让它们完成加载，然后将 background-image 设置为相同的 url。在演示中，我每次运行时都使用随机图像，因此不会缓存它们。

演示： http://jsfiddle.net/ThinkingStiff/Mp2cj/

脚本:

function loadImages() {

    var images = getImages( 5 ),
        imgs = [],
        loaded = 0;

    createImgs();

    var timer = window.setInterval( function () {
        if( loaded == images.length ) {
            window.clearInterval( timer );
            setImages();
        };
    }, 50 );

    function createImgs() {
        for( var index = 0; index < images.length; index++ ) {
            imgs.push( document.createElement( 'img' ) );
            imgs[index].onload = function () { loaded++; };
            imgs[index].src = images[index];
        };
    };

    function setImages() {
        var divs = document.querySelectorAll( '#container div' );

        for( var index = 0; index < divs.length; index++ ) {
            divs[index].style.backgroundImage = 'url(' + images[index] + ')';
            console.log( 'div' );            
        };

        document.getElementById( 'container' ).removeAttribute( 'class' );
        document.getElementById( 'loading' ).setAttribute( 'class', 'hide' );
    };

    function getImages( count ) {
        var images = [],
            url = 'http://placekitten.com/';

        for( var index = 0, width, height; index < count; index++ ) {
            width = Math.floor( Math.random() * ( 1000 - 500 + 1 ) ) + 500;
            height = Math.floor( Math.random() * ( 1000 - 500 + 1 ) ) + 500;
            images.push( url + width + '/' + height );
        };

        return images;
    };

};

loadImages();

HTML:

<div id="loading">images loading...</div>
<div id="container" class="hide">
    <div></div><div></div><div></div><div></div><div></div>
</div>​

CSS:

.hide {
    display: none;
}

#container div {
    background-size: 100px 100px;
    display: inline-block;
    height: 100px;
    width: 100px;    
}​