时间戳

首页 > 解决方案 > 如何在网页上加载图像之前显示加载器覆盖？

javascript - 如何在网页上加载图像之前显示加载器覆盖？

问题描述

我想制作一个加载叠加层，但setTimeout我想显示“加载器”，直到第一个图像完全加载到网页上。（之后，我想使用延迟图像加载）

到目前为止，我使用了 setTimeout，但效果并不好。我可以设置更大的时间，但现在加载器和图像出现之间存在“间隙”。

图片网址是从 wordpress API 获取的，我正在使用模板。我想要的是显示“加载”覆盖，直到第一个图像完全加载，所以用户看不到空白状态。

var img = document.querySelector("#img");

img.onload = function(){ 
  document.getElementById("loading").style.display = "none" 
}

我不能使用 jQuery，因为它是用于学校项目的。我通过console.log("loaded")在加载时添加 a 来尝试在这里找到的所有替代方法，但似乎没有任何效果。

标签： javascriptimageonloadloader

解决方案

也许在定义 onload 之后设置 img.src

let img = document.createElement('img');
img.onload = function(){}
img.src = "url"

推荐阅读