1

这是我第一次在 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。

因此，加载所有这些位于各处的文件似乎是一团糟。有没有办法让它们干净整洁地预加载？非常感谢您提前。

4

1 回答 1

2

这不是 laravel 特定的，但您可以指示浏览器在后台预加载给定的 url。但是，在付费移动网络上时，这种预加载可能会在手机（您的目标是加快速度）上被阻止。

要启用此功能（仅限现代浏览器），请使用链接预取元素，将其放入标题中：

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

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

于 2015-08-01T11:44:35.743 回答