加載圖像緩慢的laravel jQuery

Question

請檢查下面的我的js代碼。 它是為從文件夾獲取個人資料圖像而編寫的。 我有個人資料圖片，並且顯示正確。

我有一個默認圖像，如果用戶沒有個人資料圖像，則將顯示默認圖像。

我的問題是頁面刷新時，如果用戶有個人資料圖像，則最初顯示圖像（一毫秒），然后顯示個人資料圖像。 我該如何解決。 我認為這是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頁面：

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

控制器頁面

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

嘗試這個：

$(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();
            }
    });

});

之所以顯示最初的毫秒數是因為它是在您的代碼中編寫的，它首先顯示默認圖像，然后檢查該圖像是否為用戶顯示，然后將其替換為默認圖像。

我將默認圖片移至else條件，以便僅在上傳的用戶圖片不可用時才顯示。