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

Posted 2023-05-07

【中文标题】我的网站主页内容未按顺序加载

【英文标题】：My website home page contents are not loading sequentially

【发布时间】：2021-09-17 16:10:19

【问题描述】：

问题 我正在用 php 制作一个网站，在它的主页上，我在顶部有一个视频，在它下面有一个轮播。但是每次加载时，轮播都会先加载，然后再加载顶部视频。我想在轮播上应用延迟加载，这是一个 html 分区。现在如何确保内容的顺序加载。

标题下方的顶部视频代码是：-

@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>

视频下方的轮播代码是：-

   <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>

现在我想要，这个完整的 CAROUSEL div 应该在顶部视频完全加载时加载。我应该如何在这个 div 中应用延迟加载。

【参考方案1】：

我建议您的页面仅加载视频并添加一个侦听器以了解视频何时加载 (Wait until an HTML5 video loads)。然后在侦听器内部使用 javascript 生成轮播。 (https://www.javascripttutorial.net/dom/manipulating/create-a-dom-element/)。最后，如果您使用的是 carrousel 插件，则需要在将 carrousel html 包含到页面中后调用它。

其他解决方案，但我认为并不理想，可以设置在后端创建一个仅包含轮播的视图，然后在前端，在上述相同的侦听器中，您：

发送 ajax 请求以获取该视图， 在前端，您需要解析 html 以提取轮播。 将 carrousel html 注入页面。 初始化旋转木马

希望这很清楚。