Question

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

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来复制它。

提前谢谢。

Answer 1

你可以为此做两件事之一。

1）设置图像的内嵌尺寸。这实际上是一种推荐的方法，可以防止您在图像加载后页面跳转的情况下遇到的问题。通过设置内联尺寸，浏览器已经知道图像需要多高，并为之前预留空间它甚至完成装载。

示例：

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

2）如果您不希望将尺寸设置为内联，那么您似乎也可以提前设置样式中的高度，这样做也可以。

示例：

.refocus-img{
    height:150px;
}

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

1 个答案: