1

This my first time asking question on StackOverflow. :-)

I have a fairly complex page to be displayed involving 20+ pics, 4+ css, 6+ javascript files to be loaded. Because this page is intended to be displayed on mobile phone, I would love it to be pre-loaded (preferably with progress) so to improve user experience. I was looking at some JS libs such as Preload.js but really wondering how I can combine it with my view.

Here are some of the files:

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 - some HTML code for the page (with many graphics)
Also the @inlcude partials contain css/js/html neccessary for navigation menu.

So to load all these files located everywhere seems like a big mess. Is there a way to put them into preload nice and clean? Thank you very much in advance.

Terry L.
  • 11
  • 1
  • 3

1 Answers1

2

This is not laravel specific, but you can instruct the browser to preload a given url in the background. However, this kind of preloading will be likely prevented on mobile phones (for which you aim to gain speed) when on a paid mobile network.

To enable this functionality (modern browsers only), use the link prefetch element, put into the header:

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

The instruct-the-browser expression should be emphasized, as this will let the browser decide whether or not it is feasible to preload the specified URL, thus it might not work instantly. However, you should notice a significant decrease in loading times.

John Weisz
  • 30,137
  • 13
  • 89
  • 132