How to load the content of each page in OpenCart 3 after full page load (javascript)?

Question

I would appreciate it if someone can point me into the right direction on this issue.

I'm trying to optimize page load speed of my OpenCart project. To do this I want to load the content of each page (product/category , product/search, ...) after javascript onload like this in header.twig:

window.onload = function() {
    console.log('page loaded');

    $.post( window.location.href, { loaded: true })
        .done(function( data ) {
            alert( "Data Loaded: ");
    });
}

In php side I tried such a code but it's not successful at all.

if (isset($this->request->get['manufacturer_id']) && isset($_POST['loaded'])) {
...

If I want to use callback the problem is pages are different. I don't know how to manage all pages.

Answer 1

SOLUTION

To fix the issue I removed all window.onload = function()s from header, footer, etc. Instead, I added it to common/home, product/search, etc, and it works fine.

window.onload = function() {

var productClass = 'product-layout product-full col-lg-3 col-md-4 col-sm-6 col-xs-12';

$('#moreHolder').css("display", "block");

$.post('index.php?route=product/productx', { class: productClass },
function(data) {
     if(data.length>10){
        $(data).insertBefore($('#moreHolder'));
     }
})
.always(function() {
    $('#moreHolder').css("display", "none");
});

I also added swiper related style and javascript on each page's first load, checking it by the number of products/limit = page to not have duplicates:

{% if products %} 
{% if page <= 1 %} 
<link href="catalog/view/javascript/jquery/swiper/css/swiper.min.css" rel="stylesheet" type="text/css">
<link href="catalog/view/javascript/jquery/swiper/css/opencart.css" rel="stylesheet" type="text/css">
<script src="catalog/view/javascript/jquery/swiper/js/swiper.jquery.js" type="text/javascript"></script>
{% endif %} 
{% for product in products %}
....