Question

我正在使用jquery显示图形，需要6到7秒才能加载，所以在那个时候我必须显示图像加载器。其中图像加载器必须在图形加载之前至少显示5秒，但其显示仅持续1秒。

JS：

$(function () {
    /** image loader displaying for a sec */
    $('#graph').html('<img src="images/loader.gif">');      

    $('#graph').load(function() {
       //data of graph
    }); 
});

HTML：

<div id="graph"></div>

Answer 1

$(document).ready(function(){ 
    $('#graph').html('<img src="images/loader.gif">'); // image loader displaying
    setTimeout(function(){ 
        $('#graph').html('Loaded')
    },5000);
});

Answer 2

#graph的内容立即被.load（）方法替换。我建议您创建一个加载器div，例如.graphLoader，然后将图表数据加载到隐藏的#graph DIV中，然后在加载完成时隐藏#graph同时隐藏.graphLoader }}

这是关于jsfiddle http://jsfiddle.net/suNK5/

的工作演示

CSS：

.graphLoader {
    display:block;
}
#graph {
    display:none;
}

HTML：

<div class="graphLoader">Graph loading...</div>
<div id="graph"></div>

JAVASCRIPT：

$(document).ready(function () {
    $("#graph").load("someGraphURL", function () {
        $('#graph').toggle();
        $('.graphLoader').toggle();
    });
});

ImageLoader显示的时间不超过1秒

2 个答案: