加載圖像慢laravel jQuery

請檢查我下面的js代碼。它用於從文件夾獲取配置文件圖像。我已經獲取個人資料圖片，並且顯示正確。加載圖像慢laravel jQuery

我有一個默認圖像，如果用戶沒有配置文件圖像將顯示默認圖像。

我的問題是頁面刷新時，如果用戶有配置文件圖像默認圖像顯示最初（毫秒），然後配置文件圖像顯示。我該如何解決這個問題。我認爲這是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); 
     } 
    } 
}

來源

2015-10-20 sam sam

將它作爲變量從控制器傳遞到視圖文件...使用PHP邏輯返回默認或自定義照片名稱。 – whyguy

是它的一個加載問題。你的CSS將顯示默認爲bg。當ajax正在等待響應時，在響應未到達之前，將顯示背景圖像。也許在本地和緩存它的毫秒，但也可能是秒...爲什麼你加載圖像與AJAX，並沒有默認設置？ – Iamzozo

所以更好的事情是加載圖像沒有Ajax的權利？ –

-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條件，以使其僅在上載的用戶圖像不可用時顯示。

來源

2015-10-20 10:12:59

@Annn Choudhary，謝謝。但是頁面刷新，毫秒級，沒有圖像顯示。加載頁面後，如果用戶具有該圖像將顯示的配置文件圖像。我的目的是如何在頁面預加載時看到圖像。 –

你想在頁面加載之前顯示默認圖像，然後當用戶圖像加載時，你想用默認圖像替換用戶圖像？ –

加載圖像慢laravel jQuery

回答

相關問題