我的网站主页内容未按顺序加载

Question

Issue I am making a website in php ,and in its home page i have a video at the top and a carousel below it . But every time when it loads the carousel loads first and then top video loads . I want to apply the lazy load on carousel, which is an html division . Now how can i ensure the sequential loading of content.

CODE FOR TOP VIDEO BELOW HEADER IS :-

@extends('front.layouts.main')
@section('content')

<div class="clearfix"></div>
<!-- <script src="<?php echo url('/'); ?>/js/particles.js/particles.js"></script> -->
<div class="tp-banner-container two">
    <div class="tp-banner3">
        <ul>
            <li data-transition="fade" data-slotamount="1" data-masterspeed="500"
                data-thumb="http://placehold.it/180x110" data-delay="13000" data- 
                 saveperformance="on"
                data-title="Slide 1">
                <video  playsinline loop muted autoplay  class="fullscreen-bg__video">
                    <source src="/videos/HomePage/Jet_new.mp4" type="video/mp4">
                </video>
            </li>
        </ul>
        <!-- <div class="tp-bannertimer"></div> -->
    </div>
</div>

CODE FOR CAROUSEL BELOW VIDEO IS :-

   <div class="containerRevolvingBig" >
        <div class="carousel"  >
            <a target="_blank" href="/accessControlPage" loading="lazy">
                <div id="image1" class="carousel__face"><span class="spanRevolving">Access Control</span></div>
            </a>
            <a target="_blank" href="/perimeterSurveillancePage">
                <div id="image2" class="carousel__face"><span class="spanRevolving">Perimeter Surveillance</span></div>
            </a>
            <a target="_blank" href="/antiDronePage">
                <div id="image3" class="carousel__face"><span class="spanRevolving">Anti-Drone</span></div>
            </a>
            <a target="_blank" href="/peopleVehicleMonitoringPage">
                <div id="image4" class="carousel__face"><span class="spanRevolving">People & Vehicle Monitoring</span></div>
            </a>
            <div id="image5" class="carousel__face"><span class="spanRevolving">APPLICATIONS</span></div>
            <a target="_blank" href="/borderSurveillancePage">
                <div id="image6" class="carousel__face"><span class="spanRevolving">Border Surveillance</span></div>
            </a>
            <a target="_blank" href="/spaceAerialSurveillancePage">
                <div id="image7" class="carousel__face"><span class="spanRevolving">Space & Aerial Surveillance</span></div>
            </a>
            <a target="_blank" href="/weaponSightsPage">
                <div id="image8" class="carousel__face"><span class="spanRevolving">Weapon Sights</span></div>
            </a>
            <a target="_blank" href="/vechileMountedPage">
                <div id="image9" class="carousel__face"><span class="spanRevolving">Vehicle Mounted Surveillance</span>
                </div>
            </a>
        </div>
    </div>

Now I want that, this complete CAROUSEL div should load when the top video loads completely.How should I apply lazy load in this div.

Answer 1

I would suggest your page to have just the video loaded and add a listener to get to know when the video is loaded ( Wait until an HTML5 video loads ) . Then inside the listener generate the carrousel with javascript. ( https://www.javascripttutorial.net/dom/manipulating/create-a-dom-element/ ). Finally if you are using a carrousel plugin this will need to be call once the carrousel html has been included into the page.

Other solution but i consider is not ideal, could be set creating a view in the backend that just includes the carousel, then in the frontend, inside the same listener described above, you:

1. send an ajax request to get that view,
2. in the front-end you will need to parse the html to extract the carrousel.
3. Inject the carrousel html into the page.
4. Initialise the carrousel

Hope this is clear.