[help] Page-based loading

[sergeevabc]

There are a lot of JS loaders, really. But none of them, at least within documentation, addresses a problem I'm eager to solve. That is to use single <script> line per whole project which inits page-based loading of dependencies.

Let's create a simple project with index, portfolio, and contacts pages.

Microframework will help us with routing:

$app->get('/portfolio/',
    function () use ($app) {
        $prices = array(
              "price_mine"  => "90",
              "price_rival" => "120"
        );
        $app->render('portfolio.twig', $prices);
    })->name('portfolio');

Template engine will help us with rendering:

{% extends "base.twig" %}
{% block content %}
     <p>Aren't you sick and tired to pay {{price_rival}}…</p>.
{% endblock content %}

And the missing part in every page is <script src="/static/init.js"></script> that works as follows

• all pages load jQuery from CDN or from my server as fallback,
• index loads SoundManager to serve audio salutation,
• portfolio loads Lightbox to serve images,
• contacts loads Forms validator.

What's the best way to achieve it?
And how to do that with Lazyload whether it's possible?

Thank you in advance.
Warm regards from Russia, Alexander.

[gordyr]

I'm not quite sure I understand the question so I may be way off here.

If you mean how do you make sure you only load a single dependency once then....

I do it by simply storing an array of script urls and checking against them whenever a new request to load a script is made.

Something along the lines of this should work fine.

var scripts = [];

if(scripts.indexOf(url) === -1){
    scripts.push(url);  // Push the url into array before the complete callback so that we know instantly whether a load has been attempted.
    LazyLoad.js(url, function(){

    });
}

This way when navigating around my webapps each page, page fragment, dialog, whatever... has its own set of JS resources of which that particular piece of dynamically loaded content requires. My own mini framework attempts to load the correct resources whenever said content is loaded.

Each of these fragments may have the same dependencies. For instance:

Imagine a single page that has 3 dynamically loaded segments:

Segment 1 : Skeleton
Segment 2 : Content
Segment 3 : Adverts

Now each Segment, within it's own javascript has an array of dependencies:

Segment 1 might be ['jquery.min.js', 'somethingelse.js', 'skeleton.js']

and Segment 2 might have ['jquery.min.js', 'anotherfile.js','yetanotherfile.js', 'content.js']

etc..etc...

Now both pieces of content are being loaded at the same time and each segment requires jquery.min.js.

But, since we have stored the jquery.min.js url in an array, it is only requested by the first completed segment, and then never again.

There's many other ways to go about it but this is the basic concept. Hope it helps