Влияние загрузки на обновление диаграммы google

Question

У меня есть страница с несколькими диаграммами Google. У меня также есть раскрывающийся список на уровне страницы. Я обновляю/перезагружаю диаграммы, когда пользователь меняет значения из этого раскрывающегося списка.

Все работает нормально, но есть несколько секунд задержки между выбором значения и обновлением диаграмм. Я хочу показать наложение эффекта загрузки и изображение на странице, прежде чем все диаграммы будут обновлены.

Проблема в том, что я не могу наложить этот эффект поверх диаграмм Google. Эффект javascript эффекта загрузки срабатывает, а фон становится серым, но загрузка изображений скрыта за диаграммами.

Jsfiddle для задачи: https://jsfiddle.net/0tj1pzsk/14/

Как я могу наложить спиннера изображение на верхней части Google графики? Размещение спиннера изображения внутри диаграммы DIV будет отображаться только его для первой загрузки диаграммы, а не последующие освежает

Код:

CSS

#loading-img { 
    background: url(https://i1.wp.com/cdnjs.cloudflare.com/ajax/libs/galleriffic/2.0.1/css/loader.gif) center center no-repeat; 
    height: 100%; 
    z-index: 20; 
} 

.loading { 
    background: #a3a3a3; 
    display: none; 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    opacity: 0.5; 
} 

Javascript 

$('#test').click(function() { 
    $('.loading').show(); 
}); 

google.charts.load("current", {packages:['corechart']}); 
google.charts.setOnLoadCallback(drawChart); 
function drawChart() { 
    var data = new google.visualization.arrayToDataTable([ 
    ['Threat', 'Attacks'], 
    ['Chandrian', 38], 
    ['Ghosts', 12], 
    ['Ghouls', 6], 
    ['UFOs', 44], 
    ['Vampires', 28], 
    ['Zombies', 88] 
    ]); 

    var options = { 
    legend: 'none', 
    colors: ['#760946'], 
    vAxis: { gridlines: { count: 4 } } 
    }; 

    var chart = new google.visualization.LineChart(document.getElementById('line-chart')); 
    chart.draw(data, options); 
}; 

html 

<button id="test">test</button> 
<div class="loading"><div id="loading-img"></div></div> 
<div id="line-chart"></div> 

Answer 1

попробуйте подвигать CSS ...

z-index: 20;

от ...

#loading-img

к ...

.loading

смотрите следующий пример ...

$('#test').click(function() { 
 
$('.loading').show(); 
 
}); 
 

 
    google.charts.load("current", {packages:['corechart']}); 
 
    google.charts.setOnLoadCallback(drawChart); 
 
    function drawChart() { 
 
     var data = new google.visualization.arrayToDataTable([ 
 
     ['Threat', 'Attacks'], 
 
     ['Chandrian', 38], 
 
     ['Ghosts', 12], 
 
     ['Ghouls', 6], 
 
     ['UFOs', 44], 
 
     ['Vampires', 28], 
 
     ['Zombies', 88] 
 
     ]); 
 

 
     var options = { 
 
     legend: 'none', 
 
     colors: ['#760946'], 
 
     vAxis: { gridlines: { count: 4 } } 
 
     }; 
 

 
     var chart = new google.visualization.LineChart(document.getElementById('line-chart')); 
 
     chart.draw(data, options); 
 
    }; 
 
\t 
 
\t 
 

#loading-img { 
 
    background: url(https://i1.wp.com/cdnjs.cloudflare.com/ajax/libs/galleriffic/2.0.1/css/loader.gif) center center no-repeat; 
 
    height: 100%; 
 

 
} 
 

 
.loading { 
 
    background: #a3a3a3; 
 
    display: none; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    opacity: 0.5; 
 
    z-index: 20; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<button id="test">test</button> 
 
\t 
 
<div class="loading"><div id="loading-img"></div></div> 
 
    <div id="line-chart"></div>