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')或类似的东西。

无论如何 - 我上面发布的内容不起作用。没有预加载。我想要实现的是让所有图像一次显示 OR ，甚至更好的方法是在所有图像都加载完成之前，页面根本不显示任何内容。

感谢您的帮助！

Answer 1

当你说预加载“不起作用”时，你的意思是什么？你期望发生什么？

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

Answer 2

您可以为要加载的每个图片动态创建<img>元素，让他们完成加载，然后将background-image设置为相同的网址。在演示中，我使用每个运行的随机图像，因此它们不会被缓存。

演示： 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;    
}

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

2 个答案:

脚本：

HTML：

CSS：