Design scrambles when page loading usually and also page load slow

Guys iam working with a project an Inventory like project.

when running laravel application the deisgn scrambles by missing the textboxex or placing somewhere else in the screen like that. after one time refresh it load correctly.

But i face the problem usaually. when i first time load the page it scrambles and next reload it works fine.

what may be the reason. i faced the same problem in my last 2 projects also. i understood that mistake is mine but i can get it.

this is what the procedure i follow i have a main.blade file

<!DOCTYPE html>
<html lang="en">
    <head>
        @include('partials._head')
    </head>
    <body >
        @include('partials._navbar')
        @include('partials._messages')
            @yield('content')
             @include('partials._footer')
        @include('partials._javascript')
    </body>
</html>

here the _head contains the header tag of the html like title any css files included

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>SRP @yield('title')</title>
<script src="{{asset('js/sweetalert.min.js')}}"></script>

<link href=" {{ URL::asset('css/style.default.css') }}" rel="stylesheet">

<link href=" {{ URL::asset('css/morris.css') }}" rel="stylesheet">

<link href=" {{ URL::asset('css/select2.css') }}" rel="stylesheet">

<link href=" {{ URL::asset('css/bootstrap-timepicker.min.css') }}" rel="stylesheet">

the _navbar contains the nav bar of the application

<head>
head section include in this
</head>

the _message contains the error message to be shown in the screen

Error messages

content is the page of the center body portion of that page

_footer contains the copyrights etc texts.

_javascript file contains the necessary js files

<script src="{{asset('js/jquery-1.11.1.min.js')}}"></script>

<script src="{{asset('js/jquery-migrate-1.2.1.min.js')}}"></script>

<script src="{{asset('js/jquery-ui-1.10.3.min.js')}}"></script>

<script src="{{asset('js/bootstrap.min.js')}}"></script>

<script src="{{asset('js/modernizr.min.js')}}"></script>

<script src="{{asset('js/pace.min.js')}}"></script>

<script src="{{asset('js/retina.min.js')}}"></script>

<script src="{{asset('js/jquery.cookies.js')}}"></script>

<script src="{{asset('js/select2.min.js')}}"></script>

<script src="{{asset('js/jquery.validate.min.js')}}"></script>

<script src="{{asset('js/custom.js')}}"></script>

<script src="{{asset('js/flot/jquery.flot.min.js')}}"></script>

<script src="{{asset('js/flot/jquery.flot.resize.min.js')}}"></script>

<script src="{{asset('js/flot/jquery.flot.spline.min.js')}}"></script>

<script src="{{asset('js/jquery.sparkline.min.js')}}"></script>

<script src="{{asset('js/morris.min.js')}}"></script>

<script src="{{asset('js/raphael-2.1.0.min.js')}}"></script>

<script src="{{asset('js/bootstrap-wizard.min.js')}}"></script>

<script src="{{asset('js/dashboard.js')}}"></script>

<script src="{{asset('js/bootstrap-timepicker.min.js')}}"></script>

<script src="{{asset('js/jquery.validate.min.js')}}"></script>

why this hapens

is my flow right?? else anything wrong.

and the application is slow also.

for even 50 records application is slow. after hosting means there will lots of records so there will be too much slow.

is there any solution?? do i need to add something? or do i need to remove something?

and these are my route file


Route::get('/', function () {
    return view('Authentication.register');
});

Route::get('/LoginForm', function () {
    return view('Authentication.login');
});

Route::get('/add-product-type', function () {
    return view('Products.add-product-type');
});


//Authentication Process Start

//Register
Route::resource('RegisterLogin','AuthenticationController');

//Login
Route::post('Login','AuthenticationController@login')->name('login');

//Logout
Route::get('logout','AuthenticationController@logout')->name('logout');

//Authentication Process End



//Start of Products
Route::resource('Product_type','Product_typeController');
Route::resource('Product','ProductController');
//End of products

//Start of Supplier
Route::resource('Supplier','SupplierController');
//End of Supplier


//Start of Purchase Order List
Route::resource('PurchaseOrderList','PurchaseOrderListController');
//End of Purchase Order List

the same rule only i followed in my old tow project also.

how can i solve this?

AbdulBazith

7 years ago

Level 5

Some one answer please

Please or to participate in this conversation.