加载图像缓慢的laravel jQuery

Question

Please check my js code below. It is written for getting profile images from folder. I have getting profile images and it's displayed correctly.

I have a default image, If users have no profile image the default image will display.

My problem is when page refresh, If a user has profile image default image is showing initially(for a millisecond) and then profile image shows. How can I solve this. I think it's a loading problem from jQuery.

test.js

$(function () {

    $.get("/getDetails")
        .done(function (data) {
            $("#profile_image").css('background-image', 'url(/profile.png)');
            if (data.filename == 'Profile') {
                $("#profile_image").css('background-image', 'url(' + data.route + ')');
                $("#deleteProfileImage").show();
            }
    });

});

html page:

<div id="profile_image" style="background: url(/profile.png) no-repeat center center;">

controller page

public function show()
{
    $id                  = Auth::user()->id;
    $details             = User::select('id', 'created_at')->findOrFail($id);
    $encrypt             = md5($details->id.$details->created_at);
    $directories         = Storage::files($encrypt);                                             // Listout Files
    foreach($directories as $values){
        $split_folder_file = explode('/', $values);           //08d16e9f44699e9334834833c02b7b8e/Profile.png
        $splitted_file     = end($split_folder_file);         //Profile.png
        $explode_filename  = explode('.', $splitted_file);    //explode(Profile.png)
        $explode_name      = $explode_filename[0];            //Profile
        $file_extension    = $explode_filename[1];            //png
        if ($explode_name == 'Profile') {
            switch( $file_extension ) {
                case "gif": $ctype="image/gif"; break;
                case "png": $ctype="image/png"; break;
                case "jpeg":
                case "jpg": $ctype="image/jpeg"; break;
                default:
            }
            $file = Storage::disk('local')->get($encrypt.'/'.$splitted_file);
            return response($file, 200)
                ->header('Content-Type', $ctype);
        }
    }
}

Answer 1

Try this:

$(function () {

    $("#profile_image").css('background-image', 'url(/profile.png)');
    $.get("/getDetails")
        .done(function (data) {
            if (data.filename == 'Profile') {
                $("#profile_image").css('background-image', 'url(' + data.route + ')');
                $("#deleteProfileImage").show();
            }
    });

});

It was showing foe initial milliseconds because it's written in your code that it displays the default image first and then checks if the image is present for user and then replaces it with the default image.

I moved default image to the else condition so that its only showed when uploaded user image is not avaialble.