Question

我想在图片中显示加载gif，我正在从数据库中检索图像和值，图像将显示在img控件中，值将显示在文本框中，我希望直到图像从数据库中检索到我要显示在同一控件中加载gif，其中的retrive img来自数据库将显示。并且在img控件中完全加载数据库的img后，应该在文本框中显示值。

我做了这样的事情。

 $('#imgAssetCard').load(function () {
  }).attr('src', "../images/loading.gif");


var ImagePath = "GetImageHandler.ashx?param=" + date + "&assetDesc=true&Opt=AssetDesc&Invid=" + Invid + "";


 $('#imgAssetCard').load(function () {
   $.ajax({
            type: "POST",
            url: "AjaxGetAssetTagNumAssetDesc.aspx?param=" + date + "&Invid=" + Invid + "",
            async: false,

            success: function (strData) {
                response = strData;

                if (strData != "") {
 }


        });

    }).attr('src', ImagePath);

Answer 1

我为此目的使用了这样的东西：

    $(document).ajaxStart(function () {
        $('#divOverlay').css('display', 'block');
     }).ajaxStop(function () {
         $('#divOverlay').css('display', 'none');
    });

其中html是这样的：

    <div id="divOverlay" style="top: 0; left: 0; position: absolute; z-index: 20000; width: 100%; height: 100%; cursor: wait; display: none;">
        <div class="container">
            <img alt="loading" src="img/ajax-loader.gif" style="height: 22px; left: 12px; padding-top: 139px; position: absolute;" />
        </div>
    </div>

显然，要使用它，你需要修改这段代码，但是从这里得到逻辑。

<强>更新我第一次不明白你想要什么。

$('#imgAssetCard').attr('src', "../images/loading.gif");
var ImagePath = "GetImageHandler.ashx?param=" + date + "&assetDesc=true&Opt=AssetDesc&Invid=" + Invid + "";
var $Img = $("<img/>").attr("src", ImagePath).load(function () {
    $('#imgAssetCard').attr('src', $Img.attr('src'));
    $.ajax({
        type: "POST",
        url: "AjaxGetAssetTagNumAssetDesc.aspx?param=" + date + "&Invid=" + Invid + "",
        async: false,
        success: function (strData) {
            response = strData;
            if (strData) { }
        }
    });
});

如何在img中显示加载图像直到ajax请求

1 个答案: