Предварительная загрузка страницы в Laravel 5

Question

Это мой первый вопрос о Stackru.:-)

У меня есть довольно сложная страница, которая будет отображаться с 20+ фото, 4+ css, 6+ javascript-файлами для загрузки. Поскольку эта страница предназначена для отображения на мобильном телефоне, я бы хотел, чтобы она была предварительно загружена (желательно с прогрессом), чтобы улучшить взаимодействие с пользователем. Я смотрел на некоторые библиотеки JS, такие как Preload.js, но очень удивился, как я могу совместить это с моим представлением.

Вот некоторые из файлов:

show.blade.php -

@extends('page')

@section('title')
{{ $page->title }}
@stop

@section('header')
    @include('pages._navheader')
    {!! $page->header !!}
@stop

@section('content')
    @include('pages._nav')
    {!! $page->content !!}
@stop

@section('footer')
    <script type="text/javascript" src="/js/plugins/jquery/jquery.min.js"></script>
    @include('pages._navfooter')
    {!! $page->footer !!}
    <!-- WeChat Scripts -->
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
        wx.config(<?php echo $js->config(array('onMenuShareTimeline', 'onMenuShareAppMessage'), true, false) ?>);
    </script>
    <script type="text/javascript" charset="utf-8">
        alert('{{ $url }}');
        wx.ready(function () {
            var shareData = {
                title: '{{ Request::session()->get('nickname')}}recommends：{{ $page->title }}',
                desc: '{{ $page->description }}',
                link: '{{ $url }}',
                imgUrl: '{{ $page->thumbnail_url }}'
              };
              wx.onMenuShareAppMessage(shareData);
              wx.onMenuShareTimeline(shareData);
        });

        wx.error(function (res) {
          alert(res.errMsg);
        });
    </script>
    <!-- End WeChat Scripts -->
@stop

$ page-> header -

<link rel="stylesheet" href="/css/bootstrap/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/css/products/style.css">

$ page-> content - некоторый HTML-код для страницы (с большим количеством графики)
Также в партиалах @inlcude содержится css/js/html, необходимый для меню навигации.

Таким образом, загрузка всех этих файлов, расположенных повсюду, выглядит как большой беспорядок. Есть ли способ поместить их в предзагрузку красиво и чисто? Заранее большое спасибо.

Answer 1

Это не специфично для laravel, но вы можете указать браузеру предварительно загрузить данный URL в фоновом режиме. Однако этот вид предварительной загрузки, скорее всего, будет предотвращен на мобильных телефонах (для которых вы стремитесь набрать скорость) в платной мобильной сети.

Чтобы включить эту функцию (только в современных браузерах), используйте элемент prefetch link, вставленный в заголовок:

<link rel="prefetch" href="url/to/preload">

Выражение "указывать браузеру" следует подчеркнуть, так как это позволит браузеру решить, возможно ли предварительно загрузить указанный URL-адрес, поэтому он может не работать мгновенно. Тем не менее, вы должны заметить значительное сокращение времени загрузки.