2

I'm attempted to render a series of items from a food menu, each with it's own image in the JSON file. Because the images are loaded as background-image with inline CSS and NOT plain 'ol img, the .onLoad event gets tricky. The solutions described here won't work in this case: jQuery Ajax wait until all images are loaded

How can I know when these images are loaded so then and only then, I can choose to render the content to the user?

// 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;
});
Community
  • 1
  • 1
Jeremy P. Beasley
  • 679
  • 1
  • 7
  • 22
  • Any reason you're not using `onLoad()` for the `body`? That should fire only once everything is loaded, including background images. – Mario Jun 06 '16 at 07:45
  • May be it would be better to inline these images into CSS with data URLs? In this case there will be no need for waiting, images will be loaded with CSS itself – AndrewSilver Jun 06 '16 at 07:53

1 Answers1

0
  1. You must have to define the CSS classes instead of inline CSS
  2. To load CSS dynamically, kindly follow the below mentioned URL

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

Jatinder Bhambri
  • 36
  • 1