Question

我试图在提交多部分表单（文件上传）之前显示加载gif，这是我的代码..但图像没有显示..如果我删除它显示的submit（），所以..不是路径或语法问题。

$('#btnSubmit').click(function() {
    document.getElementById('loader').innerHTML = "<img src='<?= url::base() ?>themes/img/loading.gif' border='0' />";
    $('#uploadform').submit();
});

Answer 1

$（'＃loader'）。html =“themes / img / loading.gif'border ='0'/＆gt;”;

这将正确插入加载图像，但除非您告诉jQuery使用$ .post提交表单，否则您将被带到新的提交页面，因此无论如何您都不会看到图像。

Answer 2

如果您使用的是实际的内置表单提交方法，那么这是因为它在您的gif加载之前很久就开始加载页面我怀疑。

我通常使用httprequests来动态构建内容，因此当我提交新请求时，我会将页面内容更改为加载图像，直到收到新页面为止。

Answer 3

我猜问题是apache处理的图像请求。

所以我在div上加载图像隐藏它。

然后我从javascript中显示它：

document.getElementById('loader').style.display = "inline";

像魅力一样工作;）

Answer 4

同意Teja的评论。除非您以异步方式进行提交，否则gif显示的确是基于浏览器开始加载下一页（或后备页面）的速度。

如果你真的想要展示gif（虽然必须是某些描述的ajax），你可以做的是......

$("#btnSubmit").click(function(e){
    e.preventDefault(); // stops any 'immediate' post back or re-direction
    $("#loader").hide()
    .html("<img src='<?= url::base() ?>themes/img/loading.gif' border='0' />")
    .delay(1000).fadeIn(200, function(){
        // submit form using $.ajax or whatever suits - rebuild page on callback or navigate to new page
    });
});

从根本上讲，虽然Jonas和Teja都提到过，如果你没有做ajax - 那么用户反馈已经存在（即浏览器版本的'loader gif'会显示，因为它正在尝试加载新页面） - 所以为什么要绕着房子来打扰你的页面上的装载机gif并让它看起来像“Web 2.0”？

要么做ajax，要么让浏览器给用户提供视觉反馈。

在多部分表单上显示加载gif提交

4 个答案: