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-＆gt;标题 -

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

$ page-＆gt;内容 - 页面的一些HTML代码（包含许多图形）
另外@inlcude部分包含导航菜单的css / js / html必需项。

所以加载位于各处的所有这些文件看起来像是一团糟。有没有办法让它们进入预装好又干净？非常感谢你提前。

Answer 1

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

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

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

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

在Laravel 5中预加载页面

1 个答案: