加载图像缓慢的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 条件，以便仅在上传的用户图像不可用时显示。