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

});

它显示了敌人的初始毫秒数，因为它在你的代码中写入它首先显示默认图像，然后检查图像是否存在于用户，然后用默认图像替换它。

我将默认图片移动到其他条件，以便仅在上传的用户图片不可用时显示。

正在加载图片slow laravel jQuery

1 个答案: