Question

我试图从食物菜单中渲染一系列项目，每个项目都在JSON文件中显示自己的图像。因为图片是使用内联CSS background-image加载的，而不是简单的'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

您必须定义CSS类而不是内联CSS
要动态加载CSS，请遵循以下提及的网址

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

阻止JSON内容呈现，直到加载所有CSS图像

1 个答案: