javascript - 在 Laravel 5 中预加载页面

Question

这是我第一次在 StackOverflow 上提问。 :-)

我要显示一个相当复杂的页面，涉及要加载的 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->标题 -

<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。然而，当使用付费移动网络时，这种预加载可能会在移动电话(您的目标是提高速度)上被阻止。

要启用此功能(仅限现代浏览器)，请使用 link prefetch元素，放入标题:

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

应该强调instruct-the-browser表达式，因为这会让浏览器决定预加载指定的URL是否可行，因此它可能不会立即起作用。但是，您应该注意到加载时间显着减少。