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

这就是你遇到的问题，为什么你认为你需要这个图像。这就是处理过程需要很长时间的原因。

在功能开始之前显示图像？

2 个答案: