как показать загрузку img внутри img до запроса ajax

0

Я хочу показать загрузку gif внутри изображения, я получаю изображение и значения из базы данных, изображение будет показано в элементе управления img, и значения будут отображаться в текстовом поле, я хочу, пока изображение не будет извлечено из базы данных, я хочу показать загрузку gif в том же элементе управления, в котором будет показан вывод 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);
  • 0
    GetImageHandler.ashx дает вам фактическое изображение src ? Вы хотите показать изображение и текст из вызова AJAX, когда оба будут выполнены, и до этого вы хотите показать загрузочный GIF?
  • 0
    сначала я хочу, чтобы изображение получалось из базы данных через getImageHandler.ashx до тех пор, пока изображение не будет извлечено, загрузка gif должна отображаться в том же объекте, где будет отображаться изображение из базы данных, как только изображения из базы данных будут отображаться, а затем данные ( текст) должен отображаться через запрос ajax
Теги:

1 ответ

0

Я использую что-то подобное для этой цели:

    $(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) { }
        }
    });
});
Поделиться
  • 0
    я получаю из базы данных с использованием универсального обработчика, как я буду использовать ajaxstart и остановка, пожалуйста, дайте некоторую демонстрацию
  • 0
    @ user2522779 ajaxStart и ajaxStop являются глобальными, фрагмент кода здесь будет отображать gif загрузки каждый раз, когда есть AJAX-запрос.
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню