Javascript - 在页面的其余部分之前加载图像

Javascript - load an image before the rest of the page

本文关键字：加载 图像 余部 Javascript      更新时间：2023-09-26

我目前正在构建一个网站并将图像作为标题，但是当我加载页面时，它会跳到页面的一半，加载图像，然后跳回去。 如何先加载图像以防止其跳转？

.HTML：

<div class="refocus" id="hero-header">
  <div class="refocus-img-bg"></div>
  <div class="refocus-img focus-in">
    HTML: 
  </div>
  <div class="refocus-text-container">
    <div class="t">
      <div class="tc">
      </div>
    </div>
  </div>
</div>
        <div class="row">
            <div class=".col-md-6">
                <div id="section1">
                    <div id = "sub-text">
                        <h1>Hello</h1>
                        <br>
                        <h2>Hello</h2>
                        <h3><br>Hello.</h3>
                    </div>
                    <div id="image">
                        <img src="images/aboutme.png"/>
                    </div>
                </div>
                <div id="buttoncontainer">
                    <div id="totimeline"><a href="#" class="btn btn-success btn-large">&#x25BC;</a></div>
                </div>
            </div>
        </div>

这是一个JSFiddle来复制它。

提前谢谢你。

您可以为此做以下两件事之一。

1） 内联设置图像的尺寸。这实际上是一种推荐的方法，可以防止您遇到页面在图像加载后跳来跳去的事情。通过内联设置尺寸，浏览器已经知道图像需要多高，并在完成加载之前为其保留空间。

例： 

<img src="http://placehold.it/350x150" height="150" width="350">

2）如果您不喜欢内联设置尺寸，似乎您也可以提前设置样式中的高度，这也可以解决问题。

例： 

.refocus-img{
    height:150px;
}
相关文章：