Question

我要显示一个 gif图片，直到网站完全加载。单击按钮（onclick = window.open）后，会打开一个新页面，但该页面空白，并且仅在加载网站后才会显示 gif 。

我要点击按钮一次，打开一个新页面，并在显示该页面后立即显示gif和消失

有人可以帮我吗，什么 我做错了，或者在页面加载时缺少加载gif的东西？这是我的代码，非常感谢

land.php文件：

<button type="button"
        onClick="window.open('./gremo.cfm ',
                                     toolbar=no,
                                     menubar=no,
                                     scrolling=yes,
                                     scrollbars=yes
                                 ')">

</button>

gremo.php文件：

<head>
<script type="text/javascript">
    function showHide(elementid){
            if (document.getElementById(elementid).style.display == 'none'){
                document.getElementById(elementid).style.display = '';
            } else {
                document.getElementById(elementid).style.display = 'none';
            }
    }
    window.onload = function () { reSizeTextarea(); showHide('loadingd'); }
</script>
</head>


<body>
<div id="loadingd" align="center">
        <br/><br/><br/><img src="./loading.gif">
</div>
</body>

Answer 1

请注意，在本地运行时，资源正在快速加载。非常快

请不要忘记使用开发人员工具并配置网络限制（以模拟较慢的连接）。那应该模拟一个“真实的”场景，并让您更好地测试代码

这是chrome的屏幕截图...欣赏！

Answer 2

当您有很多内容时，将需要一些时间来加载。当onload事件发生时，图像将显示而不是隐藏。现在再次运行它，内容将被缓存，加载将完全没有时间。

因此，加载时间取决于要加载/呈现的内容，加载方式以及是否缓存。

window.onload = function () {
  document.getElementById("loading").remove()
  document.querySelector(".content").removeAttribute("hidden")
}

[hidden] {
  display: none
}

#loading {
  width: 300px;
}

<img id="loading" src="https://media.giphy.com/media/3o7bu8sRnYpTOG1p8k/source.gif" />

<div class="content" hidden>
  <img src="http://placekitten.com/200/200" />
  <img src="http://placekitten.com/100/100" />
  <img src="http://placekitten.com/300/300" />
  <img src="http://placekitten.com/400/400" />
  <img src="http://placekitten.com/500/500" />
</div>

在您的示例中，除了加载图像之外，您什么都不需要花费时间来加载。因此，一旦加载图像，就会触发window.onload。这就是为什么它闪烁。

如果要显示图像，可以添加一些逻辑信息，说如果我已经X秒钟没来过了，那就等一下......

var startTime = new Date()
window.onload = function () {
  var loadTime = new Date()
  var diff = loadTime - startTime;
  if (diff > 5000) {
    toggleLoad()
  } else {
    window.setTimeout(toggleLoad, 5000 - diff)
  }
}

function toggleLoad () {
  document.getElementById("loading").remove()
  document.querySelector(".content").removeAttribute("hidden")
}

[hidden] {
  display: none
}

#loading {
  width: 300px;
}

<img id="loading" src="https://media.giphy.com/media/3o7bu8sRnYpTOG1p8k/source.gif" />

<div class="content" hidden>
  <img src="http://placekitten.com/200/200" />
  <img src="http://placekitten.com/100/100" />
  <img src="http://placekitten.com/300/300" />
  <img src="http://placekitten.com/400/400" />
  <img src="http://placekitten.com/500/500" />
</div>

要确保快速加载gif，请在父页面上进行预加载

var img = new Image()
img.src = "your.gif"

加载gif，直到页面完全加载

2 个答案: