为什么我的网站的网格在第一次加载时会崩溃？

【问题标题】：Why is my website's grid collapsing the first time it's loaded?为什么我的网站的网格在第一次加载时会崩溃？
【发布时间】：2022-02-09 04:53:27
【问题描述】：

很抱歉在这里丢了这么多代码，但我已经玩了一个多星期了，我就是想不通。

所以我在我的个人网站上工作，问题是身体的网格系统中的图像有时会在网站的第一次加载时重叠。如果您刷新它，它似乎可以正常工作（大部分时间）。你可以自己试试：tylerteacher.com。奇怪的是该网站在 chrome 和 firefox 的兼容性查看器中工作。

我尝试在 css 中添加边距并使用“空格”功能。我已经仔细检查了 html 以确保所有内容都正确链接到 css 页面，并且我还使用了 Javascript 页面和每个视图的幻灯片功能。

非常感谢您的帮助！

let toggle = document.querySelector("#header .toggle-button");
let collapse = document.querySelectorAll("#header .collapse");

toggle.addEventListener('click' , function(){
    collapse.forEach(col => col.classList.toggle("collapse-toggle"));
})

// with masonry
new Masonry("#posts .grid", {
    itemSelector : '.grid-item',
    gutter : 20
});

// swiper libray initialization
new Swiper('.swiper-container', {
    direction : 'horizontal',
    loop : true,
    slidesPerView : 6,
    autoplay : {
        delay : 0
    },
    // responsive breakpoints
    breakpoints : {
        '@0' : {
            slidesPerView : 2

        },
        // 888px
        '@1.00' : {
            slidesPerView : 3
        },
        // 1110px
        '@1.25' : {
            slidesPerView : 4
        },
        // 1330px
        '@1.50' : {
            slidesPerView: 5
        }
    }
})

// Sticky Navigation
window.onscroll = function(){ myFunction()};

// get the current value 
let navbar = document.getElementById("header");

// get the navbar position
let sticky = navbar.offsetTop;

// sticky function
function myFunction(){
    if(window.pageYOffset >= sticky){
        navbar.classList.add("sticky");
    }else{
        navbar.classList.remove("sticky");
    }
}
@import url('https://fonts.googleapis.com/css2?family=DM+Sans&family=Poppins&family=Roboto&display=swap');

/* root styling */

:root{
    --light : #f8f9fa;
    --secondary: #adb5bd;
    --dark: #343a40;
    --primary-color: #f15bb5;
    --secondary-color: #2ec4b6;
    --border : #e9ecef;
}

body{
    font-family: 'Roboto', sans-serif;
    padding: 0;
    margin: 0;
}

a{
    text-decoration: none;
    
}

* > *{
    box-sizing: border-box;
}

/* global styling */
.text-light{
    color: var(--light);
}

.text-secondary{
    color: var(--secondary);
}

.text-dark{
    color: var(--dark);
}

.text-primary{
    color: var(--primary-color);
}

.bg-light{
    background-color: var(--light);
}

.container{
    max-width: 1200px;
    padding: 0 15px;
    margin: auto;
}

.img-fluid{
    width: 100%;
}

.text-title{
    font-family: 'DM Sans', sans-serif;
    font-weight: bold;
}

.secondary-title{
    font-family: 'Poppins' , sans-serif;
}

.display-1{
    font-size: 22px;
}

.display-2{
    font-size: 16px;
}

.display-3{
    font-size: 14px;
}

.text-center{
    text-align: center;
}

.text-right{
    text-align: right;
}

.btn{
    padding: 15px 20px;
    border: none;
}

.btn-primary{
    border-radius: 4px;
    background-color: var(--secondary-color);
}

.object-fit{
    max-height: 120px;
    height: 80px;
    width: 80px;
    object-fit: fill;
    justify-content: space-between;
}

.d-flex{
    display: flex;   
}

.flex-wrap{
    flex-wrap: wrap;
}

.justify-content-center{
    justify-content: center;
}

.justify-content-between{
    justify-content: space-between;
}

.mt-2{
    margin-top: 10px;
}

.mt-3{
    margin-top: 50px;
}

.mb-3{
    margin-bottom: 30px;
}

.m-0{
    margin: 0;
}

.px-1{
    padding-left: 5px;
    padding-right: 5px;
}

.px-2{
    padding-left: 20px;
    padding-right: 20px;
}

.py-1{
    padding-top: 10px;
    padding-bottom: 10px;
}

.py-2{
    padding-top: 20px;
    padding-bottom: 20px;
}

.py-3{
    padding-top: 30px;
    padding-bottom: 30px;
}

.thumbnail{
    width: 100%;
    height: 500px;
    object-fit: cover;
}

.rounded{
    height: 120px;
    width: 120px;
    object-fit: fill;
    border-radius: 99px;
}

.shadow{
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}


/* section styling */
 
/* ------- Navigation Menu ---------- */
.navbar{
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 10px;
}

.nav-brand{
    font-family: 'DM Sans', sans-serif;
    font-weight: bold;
    align-self: center;
    font-size: 32px;
}

.collapse{
    align-self: center;
}

.nav-link{
    font-size: 18px;
    margin: 12px;
    color: var(--dark);
    font-family: 'Poppins', sans-serif;
}

.nav-link:hover{
    color: var(--primary-color);
}

.search-box{
    display: inline;
    border-right: 1px solid var(--secondary);
    padding-right: 12px;
    margin-right: 10px;
}

.toggle-button{
    font-size: 21px;
    background-color: transparent;
    border: none;
    position: absolute;
    right: 0;
    margin: 8px 10px;
    display: none;
}

.toggle-button:focus{
    outline: none;
}


/* ------- .Navigation Menu ---------- */

/* ----------- Main Section ---------- */

#site-main{
    margin-top: 4em;
}

#posts{
    margin-bottom: 5em;
    
}

.grid{
    margin: 1 auto;
    row-gap: 20px;
}

.grid .grid-item{
    width: calc(33.3333% - 20px);
    margin-bottom: 3em;
    
}



/* ----------- .Main Section ---------- */


/* ----------- sticky ------- */

.sticky{
    position: fixed;
    top: 0;
    z-index: 99;
    width: 100%;
}

.sticky + .content{
    padding-top: 60px;
}

/* ----------- .sticky ------- */



/* Media Query */

.row{
    display: flex;
    
}

.col-3{
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
    padding-right: 35px;
}

.col-8{
    flex: 0 0 70%;
    max-width: 70%;
}

.col-4{
    flex: 0 0 30%;
    max-width: 30%;
}

@media (max-width : 1024px){
    .row{
       flex-wrap: wrap;
    }

    .col-3{
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-8{
        flex: 0 0 100%;
        max-width: 100%;
    }

    .col-4{
        flex: 0 0 100%;
        max-width: 100%;
    }

}


@media (max-width : 992px){
    .navbar{
        flex-direction: column;
    }

    #site-main{
        margin-top: 14em;
    }

}

@media (max-width : 768px){
    .grid .grid-item{
        width: calc(50% - 20px);
        border-top: 1px solid #dfdfdf;
        

    }

    .col-3{
        flex: 0 0 100%;
        max-width: calc(100% - 50px);
        padding-top: 40px;
    }
}

@media (max-width : 574px){
    .toggle-button{
        display: initial;
    }

    .collapse{
        max-height: 0;
        overflow: hidden;
        transition: all 0.8s cubic-bezier(0.51,-0.15, 0, 0.98);
    }

    .collapse .nav-link{
        display: block;
        text-align: center;
    }

    .search-box{
        border-right: none;
    }

    .collapse-toggle{
        max-height: 500px;
    }

    .grid .grid-item{
        width: calc(100% - 20px);
        border-top: 1px solid #dfdfdf;
        
    }

    #site-main{
        margin-top: 6em;
        justify-content: space-around;
    }

}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TylerTeacher</title>

    <!-- font awesome icons cdn -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
        integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w=="
        crossorigin="anonymous" />

    <!-- swiper slider css file -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.5/swiper-bundle.min.css"
        integrity="sha512-m3pAvNriL711NMlhkZHK6K4Tu2/RjtrzyjxZU8mlAbxxoDoURy27KajN1LGTLeEEPvaN12mKAgSCrYEwF9y0jA=="
        crossorigin="anonymous" />

    <!-- custom style.css file -->
    <link rel="stylesheet" href="style.css">





</head>

<body>

    <!-- Header -->
    <header id="header" class="shadow bg-light">
        <nav class="container navbar">
            <a href="/index.html" class="nav-brand text-dark">
                TylerTeacher
            </a>

            <!-- toggle button -->
            <button class="toggle-button">
                <span><i class="fas fa-bars"></i></span>
            </button>

            <!-- collapse on toggle button click -->
            <div class="collapse">
                <ul class="navbar-nav">
                    <a href="#" class="nav-link">Home</a>
                    <a href="#" class="nav-link">Resources</a>
                    <a href="#" class="nav-link">Classes</a>
                    <a href="#" class="nav-link">Testimonials</a>
                    <a href="#" class="nav-link">Contact</a>
                </ul>
            </div>

            <!-- collapse on toggle button click -->
            <div class="collapse">
                <ul class="navbar-nav">
                    <div class="search-box">
                        <a href="#" class="nav-link"><i class="fas fa-search"></i></a>
                    </div>
                    <a href="#" class="nav-link"><i class="fab fa-facebook-f"></i></a>
                    <a href="#" class="https://www.youtube.com/channel/UCDN9p8e-UAaPxtzfoVJnLMw"><i
                            class="fab fa-youtube"></i></a>
                    <a href="https://www.instagram.com/tyler.s.teacher/" class="nav-link"><i
                            class="fab fa-instagram"></i></a>
                    <a href="#" class="nav-link"><i class="fab fa-tiktok"></i></a>
                </ul>
            </div>
        </nav>
    </header>
    <!-- .Header -->
    <!--main site-->
    <main id="site-main">

        <!-- Blog Post Section -->
        <section id="posts">
            <div class="container">
                <div class="grid">

                    <!-- article -->
                    <div class="grid-item">
                        <article class="article" style="justify-content: space-around">
                            <div class="card" style="margin:auto">
                                <div class="overflow-img">
                                    <a href="#">
                                        <img src="./Assets/inspirational-word_EXZZBXPUS6.jpg" class="img-fluid" alt="">
                                    </a>
                                </div>
                                <div class="card-body text-center px-1">
                                    <a href="#" class="text-title display-1 text-dark">
                                        Welcome to TylerTeacher.com
                                    </a>
                                    <p class="secondary-title text-secondary display-3">
                                        <span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
                                        <span><i class="far fa-comments text-primary"></i> 12</span>
                                    </p>
                                </div>
                            </div>
                        </article>
                    </div>
                    <!-- .article -->
                    <!-- article -->
                    <div class="grid-item">
                        <article class="article" style="justify-content: space-around; ">
                            <div class="card" style="margin: auto">
                                <div class="overflow-img">
                                    <a href="#">
                                        <img src="./Assets/grandmother-1822560_960_720.jpg" class="img-fluid" alt="">
                                    </a>
                                </div>
                                <div class="card-body text-center px-1">
                                    <a href="#" class="text-title display-1 text-dark">
                                        Why online education is the future
                                    </a>
                                    <p class="secondary-title text-secondary display-3">
                                        <span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
                                        <span><i class="far fa-comments text-primary"></i> 12</span>
                                    </p>
                                </div>
                            </div>
                        </article>
                    </div>
                    <!-- .article -->
                    <!-- article -->
                    <div class="grid-item">
                        <article class="article" style="justify-content: space-around">
                            <div class="card" style="margin: auto" >
                                <div class="overflow-img">
                                    <a href="#">
                                        <img src="./Assets/inspirational-word_EXZZBXPUS6.jpg" class="img-fluid" alt="">
                                    </a>
                                </div>
                                <div class="card-body text-center px-1">
                                    <a href="#" class="text-title display-1 text-dark">
                                        How to overcome language anxiety
                                    </a>
                                    <p class="secondary-title text-secondary display-3">
                                        <span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
                                        <span><i class="far fa-comments text-primary"></i> 12</span>
                                    </p>
                                </div>
                            </div>
                        </article>
                    </div>
                    <!-- .article -->
                    <!-- article -->
                    <div class="grid-item">
                        <article class="article" style="justify-content: space-around">
                            <div class="card" style="margin: auto">
                                <div class="overflow-img">
                                    <a href="#">
                                        <img src="./Assets/laptop-red-cup-coffee-notebook-pen-satchel-freephotoscc-thumb-2.jpg"
                                            class="img-fluid" alt="Responsive image">
                                    </a>
                                </div>
                                <div class="card-body text-center px-1">
                                    <a href="#" class="text-title display-1 text-dark">
                                        Podcasts are a great tool for language learners
                                    </a>
                                    <p class="secondary-title text-secondary display-3">
                                        <span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
                                        <span><i class="far fa-comments text-primary"></i> 12</span>
                                    </p>
                                </div>
                            </div>
                        </article>
                    </div>
                    <!-- .article -->
                    <!-- article -->
                    <div class="grid-item">
                        <article class="article" style="justify-content: space-around">
                            <div class="card" style="margin: auto" >
                                <div class="overflow-img">
                                    <a href="#">
                                        <img src="./Assets/man_studying_online.jpg" class="img-fluid"
                                            alt="Responsive image">
                                    </a>
                                </div>
                                <div class="card-body text-center px-1">
                                    <a href="#" class="text-title display-1 text-dark">
                                        What makes some people better at learning languages?
                                    </a>
                                    <p class="secondary-title text-secondary display-3">
                                        <span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
                                        <span><i class="far fa-comments text-primary"></i> 12</span>
                                    </p>
                                </div>
                            </div>
                        </article>
                    </div>
                    <!-- .article -->
                    <!-- article -->
                    <div class="grid-item">
                        <article class="article" style="justify-content: space-around">
                            <div class="card" style="margin: auto">
                                <div class="overflow-img">
                                    <a href="#">
                                        <img src="./Assets/negative-space-picnic-city-river-sunset-ben-duchac-thumb-1.jpg"
                                            class="img-fluid" alt="Responsive image">
                                    </a>
                                </div>
                                <div class="card-body text-center px-1">
                                    <a href="#" class="text-title display-1 text-dark">
                                        Tips for becoming a more confident communicator in English
                                    </a>
                                    <p class="secondary-title text-secondary display-3">
                                        <span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
                                        <span><i class="far fa-comments text-primary"></i> 12</span>
                                    </p>
                                </div>
                            </div>
                        </article>
                    </div>
                    <!-- .article -->
                    <!-- article -->
                    <div class="grid-item">
                        <article class="article" style="justify-content: space-around">
                            <div class="card" style="margin: auto">
                                <div class="overflow-img">
                                    <a href="#">
                                        <img src="./Assets/listen-1702648_960_720.jpg" class="img-fluid"
                                            alt="Responsive image">
                                    </a>
                                </div>
                                <div class="card-body text-center px-1">
                                    <a href="#" class="text-title display-1 text-dark">
                                        How listening can make you better at speaking English
                                    </a>
                                    <p class="secondary-title text-secondary display-3">
                                        <span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
                                        <span><i class="far fa-comments text-primary"></i> 12</span>
                                    </p>
                                </div>
                            </div>
                        </article>
                    </div>
                    <!-- .article -->
                    <!-- article -->
                    <div class="grid-item">
                        <article class="article" style="justify-content: space-around">
                            <div class="card" style="margin: auto">
                                <div class="overflow-img">
                                    <a href="#">
                                        <img src="./Assets/Man_studying.jpg" class="img-fluid" alt="Responsive image">
                                    </a>
                                </div>
                                <div class="card-body text-center px-1">
                                    <a href="#" class="text-title display-1 text-dark">
                                        How to use online classes effectively
                                    </a>
                                    <p class="secondary-title text-secondary display-3">
                                        <span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
                                        <span><i class="far fa-comments text-primary"></i> 12</span>
                                    </p>
                                </div>
                            </div>
                        </article>
                    </div>
                    <!-- .article -->
                    <!-- article -->
                    <div class="grid-item">
                        <article class="article" style="justify-content: space-around">
                            <div class="card" style="margin:auto">
                                <div class="overflow-img">
                                    <a href="#">
                                        <img src="./Assets/education_tiles.jpg" class="img-fluid"
                                            alt="Responsive image">
                                    </a>
                                </div>
                                <div class="card-body text-center px-1">
                                    <a href="#" class="text-title display-1 text-dark">
                                        Coming soon
                                    </a>
                                    <p class="secondary-title text-secondary display-3">
                                        <span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
                                        <span><i class="far fa-comments text-primary"></i> 12</span>
                                    </p>
                                </div>
                            </div>
                        </article>
                    </div>
                    <!-- .article -->
                </div>

                <div class="text-center">
                    <button class="btn btn-primary secondary-title text-light">Load More Posts...</button>
                </div>
            </div>
        </section>
        <!-- .Blog Post Section -->

        

        <!-- masonry libray for horizontal grid -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"
            integrity="sha512-JRlcvSZAXT8+5SQQAvklXGJuxXTouyq8oIMaYERZQasB8SBDHZaUbeASsJWpk0UUrf89DP3/aefPPrlMR1h1yQ=="
            crossorigin="anonymous"></script>

        <!-- swiper slider cdn -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.5/swiper-bundle.min.js"
            integrity="sha512-1LlEYE0qExJ/GUfAJ0k2K2fB5sIvMv/q6ueo3syohvQ3ElWDQVSMUOf39cxaDWHtNu7M6lF6ZC1H6A1m3SvheA=="
            crossorigin="anonymous"></script>

        <!-- custom javascript main.js file -->
        <script src="main.js"></script>
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
            integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
            crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
            integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
            crossorigin="anonymous"></script>


</body>

</html>

【问题讨论】：

    标签： javascript html jquery css


    【解决方案1】：

    这是由砌体引起的。在初始化之前，您必须让页面完成加载。这对我有用

    window.addEventListener('load', function(){
    new Masonry("#posts .grid", {
        itemSelector : '.grid-item',
        gutter : 20
    });
    // remove preload if added
});

    可选：在页面加载时，您可以添加一个预加载器来隐藏页面的杂乱无章的结构。

    【讨论】：

      【解决方案2】：

      您遇到的情况是由于 Masonry 脚本根据其内容计算网格的尺寸。加载页面时，您的图像没有宽度和高度，因为浏览器不知道它们的外观。 Masonry 不会等待，无论如何都会渲染您的网格。

      解决此问题的方法是让浏览器提前知道图像的尺寸。您可以通过将width 和height 属性添加到包含宽度和高度（以像素为单位）的img 标记来实现此目的。

      <img src="your-image.jpg" class="img-fluid" width="480" height="720" alt="" />

      或者，您可以等待网格中的所有图像加载之前初始化 Masonry 脚本。

      // Loads a single image.
const loadImage = src => new Promise(resolve => {
  const image = new Image();
  image.onload = () => resolve();
  image.src = src;
});

// Get the container with all images.
// Loop over each image and wait for all of them to load.
async function allImagesLoaded(selector) {
  const container = document.querySelector(selector);
  if (container === null) {
    return;
  }

  const images = container.querySelectorAll('img');
  return Promise.all([...images].map(
    src => loadImage(src)
  ));
}

// Load all images inside #posts .grid.
allImagesLoaded('#posts .grid').then(() => {
  new Masonry("#posts .grid", {
    itemSelector : '.grid-item',
    gutter : 20
  });
});

      【讨论】：

        猜你喜欢
        • 1970-01-01
        • 2018-10-31
        • 2010-10-17
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2016-07-09
        • 1970-01-01
        相关资源
        最近更新 更多
        热门标签
        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode