1

StackOverflow について質問するのはこれが初めてです。:-)

20 個以上の写真、4 個以上の css、6 個以上の JavaScript ファイルをロードする必要がある、かなり複雑なページを表示する必要があります。このページは携帯電話で表示されることを意図しているため、ユーザー エクスペリエンスを向上させるために、(できれば進行状況と共に) 事前に読み込まれることを望んでいます。Preload.jsなどのいくつかの 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 prefetch要素を使用して、ヘッダーに挿入します。

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

Instruct -the-browser式は強調する必要があります。これにより、指定された URL をプリロードできるかどうかをブラウザーが判断できるため、すぐには機能しない可能性があります。ただし、読み込み時間が大幅に短縮されていることに気付くはずです。

于 2015-08-01T11:44:35.743 に答える