部分内容仅在页面刷新后显示

Question

部分内容在我第一次打开此特定html页面时未显示，我网站的其他页面似乎还可以，刷新页面后，内容加载正常。

Content not showing - Mobile

Content not showing - Desktop

这发生在台式机和移动设备上，分辨率较低，

在全屏模式下，内容似乎应该显示。

我正在使用Javascript脚本来更改页面内容src='js/dynamicpage.js'和src='js/jquery.ba-hashchange.min.js'，这可能是问题吗？

任何帮助都会有帮助

body {
 background-color: white;
}

a { 
    color: inherit; 
} 

a:hover { 
    color: inherit; 
} 

#logo{
    width: 70%;
    height: auto;
}

#logo-footer{
    text-align: center;
    width: 100%;
    height: auto;
    padding: 30px;
}

#footer-info{
    text-align: center;
    width: %;
    height: auto;
    margin-top: 30px;
    color: darkgrey;
    letter-spacing: 3px;
    font-size: 10px;
    line-height: 2px;
    padding: 20px;

}

#camada{
    width: 65%;
    position:relative;
    right: 50px;
    height: auto;
    text-align: center;
    z-index:0;
}

#list{
    text-align: center;
    padding-right:9%;
    color: grey;
    font-size: 18px;
    letter-spacing: 3px;
    font-weight:lighter;
    z-index:1;
    
}

#nav ul li {
	  display:inline;
}


#social-icons{
    width: 15px;
    float: left;
    margin: 0px 5px;
}

#social-icons:hover
{
        -webkit-transform: scale(1.3);
        -ms-transform: scale(1.3);
        transform: scale(1.3);
}


#list .current {
        color: #242424;
        font-weight: bolder;
        text-decoration: none;
        border-bottom: 3px solid #bfbfbf;
}

#dog-parents-flags{
    width: 25px;
}

#dog-parents-gender{
    width: 65px;
}

#dog-parents-name{
    
}

#option1{
    margin: 0 0 3px 0;
}

#option2{
    margin: 0 0 3px 0;
}

#option3{
    margin: 0 0 3px 0;
}

#option4{
    margin: 0 0 3px 0;
}

#option5{
    margin: 0 0 3px 0;
}












.cta-100 {
  margin-top: 100px;
  padding-left: 8%;
  padding-top: 7%;
}
.col-md-4{
    padding-bottom:20px;
}

.white {
  color: #fff !important;
}
.mt{float: left;margin-top: -20px;padding-top: 20px;}
.bg-blue-ui {
  background-color: #708198 !important;
}
figure img{width:300px;}

#blogCarousel {
  padding-bottom: 100px;
}

.blog .carousel-indicators {
  left: 0;
  top: -50px;
  height: 50%;
}


/* The colour of the indicators */

.blog .carousel-indicators li {
  background: #708198;
  border-radius: 50%;
  width: 8px;
  height: 8px;
}

.blog .carousel-indicators .active {
  background: #0fc9af;
}




.item-carousel-blog-block {
  outline: medium none;
  padding: 15px;
}

.item-box-blog {
  border: 1px solid #dadada;
  text-align: center;
  z-index: 4;
  padding: 20px;
}

.item-box-blog-image {
  position: relative;
}

.item-box-blog-image figure img {
  width: 100%;
  height: auto;
}

.item-box-blog-date {
  position: absolute;
  z-index: 5;
  padding: 4px 20px;
  top: -20px;
  right: 8px;
  background-color: #41cb52;
}

.item-box-blog-date span {
  color: #fff;
  display: block;
  text-align: center;
  line-height: 1.2;
}

.item-box-blog-date span.mon {
  font-size: 18px;
}

.item-box-blog-date span.day {
  font-size: 16px;
}

.item-box-blog-body {
  padding: 10px;
}

.item-heading-blog a h5 {
  margin: 0;
  line-height: 1;
  text-decoration:none;
  transition: color 0.3s;
}

.item-box-blog-heading a {
    text-decoration: none;
}

.item-box-blog-data p {
  font-size: 13px;
}

.item-box-blog-data p i {
  font-size: 12px;
}

.item-box-blog-text {
  max-height: 100px;
  overflow: hidden;
}

.mt-10 {
  float: left;
  margin-top: -10px;
  padding-top: 10px;
}

.btn.bg-blue-ui.white.read {
  cursor: pointer;
  padding: 4px 20px;
  float: left;
  margin-top: 10px;
}

.btn.bg-blue-ui.white.read:hover {
  box-shadow: 0px 5px 15px inset #4d5f77;
}


.container-ourdogs{
}

.dog-gender{
    width: 30%;
    padding-bottom: 13%;
}

disponible{
    font-size: 11px;
    color: green;
    margin-left: -15px;
}

notdisponible{
    font-size: 11px;
    color: red;
    margin-left: -15px;
}


.fa-envelope {
  color: white;
}




h3.h3 {
  text-align: center;
  margin: 1em;
  text-transform: capitalize;
  font-size: 1.7em;
}


/********************* DOGS SLIDER CSS **********************/

.product-grid8 {
  font-family: Poppins, sans-serif;
  position: relative;
  z-index: 1
}

.product-grid8 .product-image8 {
  border: 1px solid #e4e9ef;
  position: relative;
  transition: all .3s ease 0s
}

.product-grid8:hover .product-image8 {
  box-shadow: 0 0 10px rgba(0, 0, 0, .15)
}

.product-grid8 .product-image8 a {
  display: block
}

.product-grid8 .product-image8 img {
  width: 100%;
  height: auto
}

.product-grid8 .pic-1 {
  opacity: 1;
  transition: all .5s ease-out 0s
}

.product-grid8:hover .pic-1 {
  opacity: 0
}

.product-grid8 .pic-2 {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  transition: all .5s ease-out 0s
}

.product-grid8:hover .pic-2 {
  opacity: 1
}

.product-grid8 .social {
  padding: 0;
  margin: 0;
  list-style: none;
  position: absolute;
  bottom: 13px;
  right: 13px;
  z-index: 1
}

.product-grid8 .social li {
  opacity: 0;
  transform: translateY(3px);
  transition: all .5s ease 0s
}

.product-grid8:hover .social li {
  margin: 0 0 10px;
  opacity: 1;
  transform: translateY(0)
}

.product-grid8:hover .social li:nth-child(1) {
  transition-delay: .1s
}

.product-grid8:hover .social li:nth-child(2) {
  transition-delay: .2s
}

.product-grid8:hover .social li:nth-child(3) {
  transition-delay: .4s
}

.product-grid8 .social li a {
  color: grey;
  font-size: 17px;
  line-height: 40px;
  text-align: center;
  height: 40px;
  width: 40px;
  border: 1px solid grey;
  display: block;
  transition: all .5s ease-in-out
}

.product-grid8 .social li a:hover {
  color: #000;
  border-color: #000
}

.product-grid8 .product-discount-label {
  display: block;
  padding: 4px 15px 4px 30px;
  color: #fff;
  background-color: #0081c2;
  position: absolute;
  top: 10px;
  right: 0;
  -webkit-clip-path: polygon(34% 0, 100% 0, 100% 100%, 0 100%);
  clip-path: polygon(34% 0, 100% 0, 100% 100%, 0 100%)
}

.product-grid8 .product-content {
  padding: 20px 0 0;
}

.product-grid8 .price {
  color: #242424;
  font-size: 19px;
  font-weight: 400;
  margin-bottom: 8px;
  text-align: left;
  transition: all .3s;
}

.product-grid8 .price span {
  color: #999;
  font-size: 14px;
  font-weight: 500;
  text-decoration: line-through;
  margin-left: 7px;
  display: inline-block;
}

.product-grid8 .product-shipping {
  color: grey;
  font-size: 15px;
  margin: 0 0 15px;
  display: block;
  position: relative;
}

.product-grid8 .title {
  font-size: 16px;
  font-weight: 400;
  text-transform: capitalize;
  margin: 0 0 30px;
  transition: all .3s ease 0s;
  position: relative;
}

.product-grid8 .title a {
  color: #000
}

.product-grid8 .title a:hover {
  color: #0081c2
}

.product-grid8 .all-deals {
  display: block;
  color: #fff;
  background-color: #2e353b;
  font-size: 15px;
  letter-spacing: 1px;
  text-align: center;
  text-transform: uppercase;
  padding: 22px 5px;
  transition: all .5s ease 0s
}

.product-grid8 .all-deals .icon {
  margin-left: 7px
}

.product-grid8 .all-deals:hover {
  background-color: #0081c2
}

@media only screen and (max-width:990px) {
  .product-grid8 {
    margin-bottom: 30px
  }
}

<!DOCTYPE html>
<html lang="en">
  <head>
   <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" type="image/png" href="images/favicon.png"/>


    <link href="css/bootstrap-4.0.0.css" rel="stylesheet">      
	  <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="jquery.min.js"></script>       
    <script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script> 
    
    <!-- Custom Scripts -->
    <script type='text/javascript' src='js/jquery.ba-hashchange.min.js'></script>  
    <script type='text/javascript' src='js/dynamicpage.js'></script>
      
  </head>
	
  <body>
     
        <div class="container">
        <div class="row" style="padding-top: 60px">
  
        <div class="col-sm-3"></div>
         <div class="col-md-6">
             <div style="height:160px;text-align: center;">
                 <img id="logo" src="images/logo_1.png"></img>
            </div>
            <br>

            <div style="height:100px">
                <nav id="nav" >
                    <ul id="list">
                        <li style="list-style-type: none;" id="option1"><a class="current" href="index.html" >Home</a></li>
                        <li style="list-style-type: none;"  id="option2"><a href="about.html">About</a></li>
                        <li style="list-style-type: none;"  id="option3"><a href="ourdogs.html">Our Dogs</a></li>
                        <li style="list-style-type: none;"  id="option4"><a href="ourpuppies.html">Puppies</a></li>
                        <li style="list-style-type: none;" id="option5"><a href="contact.html">Contact</a></li>
                    </ul>
                </nav> 
            </div>
         </div>
            <div class="col-sm-3"></div>
        </div>
           <hr>
           
        <!-- PAGEWRAP & GUTS IS A DYNAMIC JS SCRIPT TO CHANGE PAGE CONTENT -->

        <div id="page-wrap" style="height: auto px;">
        <div class="row" id="main-content">
            <div class="col-sm-12" id="guts">
                <h2 style="color: #242424"></h2>
                <br>

        <!-- DOG 1 -->
                          
<div class="container-ourdogs">
    <div class="row">
        <div class="col-md-4 col-sm-6">
            <div class="product-grid8">
                <div class="product-image8">
                    <a href="#">
                        <img class="pic-1" src="images/our_dogs/1.png">
                        <img class="pic-2" src="images/our_dogs/2.png">
                    </a>
                </div>
                <div class="product-content">
                    <div class="price">Rusty Viking
                        <span><img src="images/male.png" class="dog-gender" ></img></span>
                    </div>
                    <span class="product-shipping">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin a dictum purus, at tempus risus. Integer sapien nisl, pellentesque eu iaculis ut, luctus ac ligula. Praesent eu risus nunc.</span>
                
                    <hr>            
                    <!-- DOG MOTHER -->
                    <span><img id="dog-parents-flags" src="images/Flags/pt.PNG"></img><span style=" vertical-align: middle;margin-left: 7px;" >Rusty Viking - <span style="color: #bfbfbf ">Vikingbull´s</span></span></span>
        
                    <br>
        
                    <!-- DOG FATHER -->
                    <span><img id="dog-parents-flags" src="images/Flags/sw.PNG"></img><span style="vertical-align: middle; margin-left: 7px;" >Example Warrior - <span style="color: #bfbfbf ">Examplebull</span></span></span>  
                 
                
                <!-- DOG 2 -->
                
                      <h3 class="title" style="text-align: center;"></h3>
                </div>
                    
            </div>
        </div>
        <div class="col-md-4 col-sm-6">
            <div class="product-grid8">
                <div class="product-image8">
                    <a href="#">
                        <img class="pic-1" src="images/our_dogs/3.png">
                        <img class="pic-2" src="images/our_dogs/4.png">
                    </a>
                </div>
                <div class="product-content">
                    <div class="price">Rusty Viking
                        <span><img src="images/female.png" class="dog-gender" ></img></span>
                    </div>
                    <span class="product-shipping">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin a dictum purus, at tempus risus. Integer sapien nisl, pellentesque eu iaculis ut, luctus ac ligula. Praesent eu risus nunc.</span>
                
                    <hr>            
                    <!-- DOG MOTHER -->
                    <span><img id="dog-parents-flags" src="images/Flags/pt.PNG"></img><span style=" vertical-align: middle;margin-left: 7px;" >Rusty Viking - <span style="color: #bfbfbf ">Vikingbull´s</span></span></span>
        
                    <br>
        
                    <!-- DOG FATHER -->
                    <span><img id="dog-parents-flags" src="images/Flags/sw.PNG"></img><span style="vertical-align: middle; margin-left: 7px;" >Example Warrior - <span style="color: #bfbfbf ">Examplebull</span></span></span>  
       
                
                <!-- DOG 3 -->
                
                
                    <h3 class="title" style="text-align: center;"></h3>
                </div>
            </div>
        </div>
        <div class="col-md-4 col-sm-6">
            <div class="product-grid8">
                <div class="product-image8">     
                    <a href="#">
                        <img class="pic-1" src="images/our_dogs/5.png">
                        <img class="pic-2" src="images/our_dogs/6.png">
                    </a>
                </div>
                <div class="product-content">
                    <div class="price">Rusty Viking
                        <span><img src="images/female.png" class="dog-gender" ></img></span>
                    </div>
                    <span class="product-shipping">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin a dictum purus, at tempus risus. Integer sapien nisl, pellentesque eu iaculis ut, luctus ac ligula. Praesent eu risus nunc.</span>
                     
                    <hr>            
                    <!-- DOG MOTHER -->
                    <span><img id="dog-parents-flags" src="images/Flags/pt.PNG"></img><span style=" vertical-align: middle;margin-left: 7px;" >Rusty Viking - <span style="color: #bfbfbf ">Vikingbull´s</span></span></span>
        
                    <br>
        
                    <!-- DOG FATHER -->
                    <span><img id="dog-parents-flags" src="images/Flags/sw.PNG"></img><span style="vertical-align: middle; margin-left: 7px;" >Example Warrior - <span style="color: #bfbfbf ">Examplebull</span></span></span>  
 
                
                    <h3 class="title" style="text-align: center;"></h3>
                </div>
            </div>
        </div>
    </div>
</div>                                                  
                <br>
                 <hr>
             </div>
        </div>
        </div>
    
        <div class="row">
            <div class="col-sm-12"></div>
        </div>
      <br>
      <br>
    
    <!-- FOOTER -->
        <div class="row">
            <div class="col-sm-3"></div>
            <div class="col-sm-3">
                <img id="logo-footer" src="images/logo_2.png"></img>
            </div>
            <div class="col-sm-3">
                <div id="footer-info">
                    <p>Guarda, Portugal</p>
                    <p>example@bullterrier.pt</p>
                    <p>+351 922 222 222</p>
                    <p><a href="https://www.instagram.com"><img id="social-icons" src="images/fb-icon.png"></img></a></p>
                    <p><a href="https://www.instagram.com/"><img id="social-icons" src="images/instagram-icon.png"></img></a></p>
                </div>  
            </div>
            <div class="col-sm-3"></div>
        </div>
        <div class="row" style="height: 30px"></div>
    </div>
  </body>

</html>

Answer 1

您必须在body标签的末尾启动脚本，或者在脚本的标签内设置属性'defer'，这样可以确保脚本仅在加载页面的所有组件之后才能启动。

例如：

<script defer type='text/javascript' src='js/dynamicpage.js'></script>