Предотвращение воспроизведения содержимого JSON до тех пор, пока не будут загружены все изображения CSS

Question

Я попытался отобразить ряд элементов из меню продуктов, каждый со своим собственным изображением в файле JSON. Поскольку изображения загружаются как background-image с встроенным CSS и НЕ простым 'ol img, событие .onLoad становится сложным. Решения, описанные здесь, не будут работать в этом случае: jQuery Ajax wait until all images are loaded

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

// gather all menu items 
 
$.getJSON('menu.json', function(drinks) { 
 
    var output = ""; 
 
    // loop through each item 
 
    for (var i in drinks.menuItems) { 
 
    output += "<div class='MenuItem'><div class='MenuItemThumb' style='background-image: url(" + drinks.menuItems[i].photos.squareThumb + ")'></div>" + drinks.menuItems[i].name + "</div>"; 
 
    } 
 
    // render the items 
 
    // here's where I want to verify that all the "squareThumb" images have loaded. 
 
    document.getElementById("liveContent").innerHTML=output; 
 
});

Answer 1

1. Вы должны определить CSS классы вместо встроенного CSS
2. Для загрузки CSS динамически, вам необходимо следовать указанным ниже URL

http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml