加载图像不显示jQuery [英] loading image not showing jquery

问题描述

我有一个通过ajax上传文件的文件上传按钮，我每3秒发送一次ajax请求来显示上传的图片，问题是，每当用户单击上传"按钮时，我都想显示一个加载图像，并且成功隐藏它，但图像不显示.如上所述，我还有另一个ajax调用来获取上载的图片，并且我认为它正在隐藏图片.所以我要简单的是，当用户单击按钮显示加载的图像时，然后当第二个ajax调用将上传的图像显示回给用户时，隐藏该图像.有人可以给我提示吗?

I have a file upload button which uploads file via ajax and I am displaying the uploaded picture back by sending ajax request every 3 seconds, The problem is that, I would like to show a loading image whenever the user clicks upload button and hide it on success, but the image is not showing. As said above I have another ajax call to fetch for the uploaded picture and I think it is hiding the picture. So what I want simply is, when the user click on the button show the loading image then when the 2nd ajax call displays the uploaded image back to the user, hide the image. can someone give me hint?

$("#loading_image").html('<div class="loadm"><img src="../image/ajax-loader.gif"/>//I have tried putting the loading image on the also.

$(document).ready(function()
{
     profileRefresh();
    var uploaded_files_location = "../img/";
    new AjaxUpload($('#upload_button '), 
    {   
        hoverClass: 'btn - primary',
        action: 'picture.php ? target = profile ',
        name: 'file_to_upload ',
        onSubmit: function(file, file_extensions){
            $('#errormsg ').html('');

            if (!(file_extensions && /^(jpg|png|jpeg|gif|JPG)$/.test(file_extensions)))
            {
                $('#error ').html(' < div class = "error" align = "left" > Sorry, you can only upload the following file formats : JPG, JPEG, PNG and GIF... < /div>');
                return false;
            }
            else
            {
                $("#loading_image").html('<div class="loadm"><img src="../image / ajax - loader.gif "/></div>');//this is the loading image that is not showing.
                return true;
            }
        },
        onComplete: function(file, response){}
    });
});


var profileRefresh = function() {
    $.ajax({    
        type: "GET ",
        url: "picture ? target = refresh ",  
        success: function(response){ 
            $("#pro").html(response);
             setTimeout(profileRefresh, 3000); 
            $("#loading_image ").fadeOut('fast');// hide the loading image
        }
    });
};

推荐答案

做一件事.像下面一样，将加载的图像保存在img标签中

Do one thing. Keep the loading image in an img tag as like the following

<img id="load" src="../image/ajax-loader.gif"/>

现在将其加载到您要显示的位置

Now load it into where you want to display

$("#loading_image").html($("#load").html());

这篇关于加载图像不显示jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！