2
Je suis tenté de rendre une série d'éléments à partir d'un menu d'aliments, chacun avec sa propre image dans le fichier JSON. Étant donné que les images sont chargées en tant que background-image avec le CSS en ligne et PAS simplement img, l'événement .onLoad devient difficile. Les solutions décrites ici ne fonctionneront pas dans ce cas: jQuery Ajax wait until all images are loadedEmpêche le rendu du contenu JSON jusqu'à ce que toutes les images CSS soient chargées
Comment puis-je savoir quand ces images sont chargées alors alors et seulement alors, je peux choisir de rendre le contenu à l'utilisateur?
// 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;
});
Une raison pour laquelle vous n'utilisez pas 'onLoad() 'pour le' corps'? Cela devrait se déclencher seulement une fois que tout est chargé, y compris les images de fond. – Mario
Peut-être qu'il serait préférable d'intégrer ces images dans CSS avec des URL de données? Dans ce cas, il n'y aura pas besoin d'attendre, les images seront chargées avec CSS – AndrewSilver