모든 CSS 이미지가로드 될 때까지 JSON 콘텐츠 렌더링을 방지합니다.

각 JSON 파일에 자체 이미지가 포함 된 일련의 항목을 푸드 메뉴에서 렌더링하려고합니다. 이미지가 background-image 인라인 CSS로로드되고 일반 'img'이 아닌 것으로로드되므로 .onLoad 이벤트가 까다로워집니다. 여기에 설명 된 솔루션은이 경우 작동하지 않습니다. jQuery Ajax wait until all images are loaded 모든 CSS 이미지가로드 될 때까지 JSON 콘텐츠 렌더링을 방지합니다.

이러한 이미지가로드 된 시점을 어떻게 알 수 있습니까? 그렇다면 사용자에게 콘텐츠를 렌더링하도록 선택할 수 있습니까?

// 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; 
 
});

출처

2016-06-06 Jeremy P. Beasley

'onLoad()'를 사용하지 않는 이유는 무엇입니까? '몸 '을 위해서? 배경 이미지를 포함하여 모든 것이로드 된 후에 만 실행됩니다. – Mario

이러한 이미지를 데이터 URL이있는 CSS로 인라인하는 것이 더 좋을 수 있습니까? 이 경우에는 대기 할 필요가 없으며 이미지 자체가 CSS로로드됩니다. – AndrewSilver