Question

我的目标是在点击后用图片加载器替换表单提交按钮，这样当加载上传的图像时，用户不会只看一个空白屏幕。我实现了这一点，但它并不理想。

我觉得好像我做得不好，因为加载器表现得很奇怪，有时它会只显示一次而有些只会重复，background-repeat: no-repeat没有效果。

这是我的jQuery：

$(document).ready(function() {
   $("input[name='application-submit']").hover(function() {
      $(this).toggleClass("btn-hover");
      $("form").submit(function() {
         $("input[name='application-submit']").after('<img src="img/loader.GIF" alt="Swole Inc Loader" class="loader">');
         $("input[name='application-submit']").hide();
         $("img.loader").css("position", "relative", "top", "0", "left", "0");
      });
   });
});

我在这里做错了什么才能让我使用的CSS效果不佳？我的方法是古老的吗？有什么更有效的方法呢？（我不想要完整的代码，我只需要正确指导我做错了什么。）

您可以看到实时示例here。如果您上传图片然后点击提交（忽略其他字段），您将看到有问题的图片加载器。

Answer 1

问题出现在每次点击添加新图片时，您还要添加多个提交处理程序

$(document).ready(function () {
    var $btn = $("input[name='application-submit']").hover(function () {
        $(this).toggleClass("btn-hover");
    });
    $("form").submit(function () {
        var $img = $btn.next('.loader').show();
        if (!$img.length) {
            $img = $('<img src="img/loader.GIF" alt="Swole Inc Loader" class="loader">').css({
                position: 'relative',
                top: 0,
                left: 0
            }).insertAfter($btn);
        }
        $btn.hide();
    });
});

单击表单上的提交按钮后添加加载程序（加载程序不断重复）

1 个答案: