Lazy Loading PHP-JavaScript

Normally when a user opens a webpage, the entire page’s contents are downloaded and rendered in a single go .
While this allows the browser to cache the web page, there’s no guarantee that the user will actually view all of the downloaded content.

For example, If an entire photo gallery is downloaded but the user leaves after only viewing the first image, then the result is wasted memory and bandwidth.

Instead of bulk loading all of the content when the page is accessed, content can be loaded when the user accesses a part of the page that requires it.
With lazy loading, pages are created with placeholder content which is only replaced with actual content when the user needs it.

Benefits of Lazy Loading

1. Lazy loading strikes a balance between optimizing content delivery and streamlining the end user’s experience.
2. Users connect to content faster, since only a portion of the website needs to be downloaded when a user first opens it.
3. Businesses see higher customer retention as content is continuously fed to the user, reducing the chances the user will leave the website.
4. Businesses see lower resource costs since content is only delivered when the user needs it, rather than all at once.

Adding lazy loading can make a website load faster, save bandwidth, and provide a truly uninterrupted browsing session.
Almost half of all users who visit a website view only a single page.
By continuously adding new content as the user scrolls, lazy loading can make that single view really count.

The Lazy-Loading technique can be used for images, forms and (javascript)-coding.
All three are straight-forward, serach the internet and you will find several examples how to do that.
The PHP-embedded method however is - as far as I have seen - never documented.

Requirements

• Webserver Apache
• jQuery
• Server side PHP with at least 3 PHP-Files
  • The startup PHP-code in 'Project.php' which creates the client-website
  • The backend PHP-code in 'Project-be.php'.
  • The common PHP-code with all common variables defined in 'Project-co.php'

Assuming

The website has

• Menu structure with tabs (Bootstrap navbar)
• Tabs have names like 'tabHome', 'tabHelp' etc. In this case assumed the tab 'tabPrefs'.

Client PHP

The jQuery .ready is somewhere is your code. <syntaxhighlight lang="javascript" line highlight="1,18,20"> var jsPrefs = false;

$(document).ready(

 function() {
     'use strict';
     var met  = ".ready";
     ...
     /**
      * Detecting the change of tab.
      * The target contains the name of the tab
      * @param  event e The event
      * See http://ericsaupe.com/tag/bootstrap-3-tabs-example-ajax
      */
     $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        var met    = "data-toggle=tab";
        var target = $(e.target).attr("href") // activated tab
        switch(target) {
          case '#tabPrefs'        :   
                   if (jsPrefs == false) {
                         lazyLoadingJS4PHP( 'js/Prefs-JS.php', 'doGetFormPrefs()' );
                   }
                   break;
          ...
      }
 }

); </syntaxhighlight>

• 1. The variable 'jsPrefs' has to be defined bfore naking any call to the lazy code.
• 18. The tab-name.
• 20. The loaded script has to set the jsPrefs variable to true.