Загружать все фоновые изображения одновременно с помощью 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') или что-то подобное.

В любом случае - то, что я выложил выше, нене работаетПредварительная загрузка не производится.Я хочу добиться, чтобы все изображения отображались одновременно ИЛИ Еще лучше, чтобы страница вообще ничего не отображала, пока все изображения не будут загружены.

Спасибо за любую помощь!

Answer 1

Вы можете сделать это, динамически создавая <img> элементы для каждого изображения, которое вы хотите загрузить, дайте им завершить загрузку, а затем установите 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;    
}​

Answer 2

Когда вы говорите, что предварительная загрузка «не работает», что вы имеете в виду?Что вы ожидаете?

«Предварительная загрузка» означает «загрузка до того, как вам нужно».Если HTML-элементы с этими фоновыми изображениями находятся на той же странице, что и используемый вами JavaScript, тогда браузер будет загружать их, как только проанализирует CSS, что вряд ли будет заметно после того, как JavaScript перестал работать.