如何使用jquery显示图像加载gif

时间:2010-06-22 13:50:47

标签: asp.net javascript jquery image load

任何人都可以建议在使用jQuery在运行时加载图像时如何显示图像加载gif。

1 个答案:

答案 0 :(得分:0)

作为发布文章的附加选项,您可以绑定到ajax函数(如果您使用的是ajax)。以下是我在我的应用中如何执行此操作的示例(效果很好)。

function AddAjaxLoader(DivObject, Message) {
if (Message === undefined || Message === "") { Message = "Loading..."; }
var loader = $("<span />", {
    'class': 'ajaxLoading',
    html: '<span class="ajaxLoadingIcon">&nbsp;</span><span>' + Message + '</span>'
});

$(DivObject).hide().after(loader);

loader.ajaxComplete(function () {
    $(this).fadeOut('fast', function () {
        $(DivObject).show();
        $(this).remove();
    });
});
}

和CSS:

.ajaxLoadingIcon
{
    padding:9px;
    background: url(../Images/Icons/16_ajax-loader.gif) no-repeat left center;
}

或没有ajax ......

function AddLoader(DivId) {
    $("#" + DivId).html('<div class="ajaxBlock"><span class="ajaxLoadingIcon">&nbsp;</span> Loading...</div>');
}