Показать изображение перед началом функции?

Question

Это мой образ, который должен быть загружен перед циклом

<div id="attendenceGridDivLoader" style="display:none"> 
<img src="<?php echo base_url() . 'images/loader.gif'; ?>" /> 
</div> 

<select onchange=checkAll(this.value);></select> 

Что происходит, когда checkAll() функция называется изображение не загружается и цикл работает так он висит мой браузер в течение некоторого времени, а затем Все отлично.

Что я хочу, чтобы загрузить изображение до начала цикла

function checkAll(el){ 
    $("#attendenceGridDivLoader").show(); 
    var hArr= $('.subCheckBox'); 
    for(x=0;x<hArr.length;x++){ 
     $('.subCheckBox').val(el); 
    } 
    if(x==hArr.length){ 
     $('#attendenceGridDivLoader').hide(); 
    } 
} 

Answer 1

Это происходит потому, что браузер не получает время для перерисовки окна после того, как отображаемое изображение называется

function checkAll(el) { 
    $("#attendenceGridDivLoader").show(); 
    //give a little time for the image to get displayed 
    setTimeout(function() { 
     var hArr = $('.subCheckBox'); 
     for (x = 0; x < hArr.length; x++) { 
      $('.subCheckBox').val(el); 
     } 
     if (x == hArr.length) { 
      $('#attendenceGridDivLoader').hide(); 
     } 
    }, 50) 
} 

Answer 2

код не имеет никакого смысла.

//hArr is a selector with checkboxes 
var hArr= $('.subCheckBox'); 
//loop through each checkbox 
for(x=0;x<hArr.length;x++){ 
    //in each iteration, assign a value to every checkbox, again 
    $('.subCheckBox').val(el); 
} 

эффект будет таким же в этом коде, но без O (N * N) сложности и повесьте раз

//just set the value to the checkboxes. That's it. No loops, no nothing 
$('.subCheckBox').val(el); 

Это проблема у вас возникли, почему вы думаете, нужен образ. Вот почему процесс занимает много времени.