如何解决除特定图片外,身体是否处于活动状态?
我有一个HTML页面,其中包含大量文本和图像。一幅特定的图像加载缓慢。当页面的其余所有部分都加载完后,除了该特定图像,我想做些事情。像这样:
<!DOCTYPE html>
<html>
<head></head>
<body onloadExceptSlowImage="doSomething();">
... several things,including some quick images ...
<img id="SlowImage" src="slowImage.jpg" />
... several things,including some quick images ...
</body>
</html>
这可能吗?怎么样?
解决方法
经过深思熟虑,我想到了一个简单的解决方法:
<!DOCTYPE html>
<html>
<head>
<script>
function doSomething() {
// Do whatever
document.getElementById("SlowImage").src="slowImage.jpg";
}
</script>
</head>
<body onload="doSomething();">
... several things,including some quick images ...
<img id="SlowImage" src="tempImage.jpg" />
... several things,including some quick images ...
</body>
</html>
,
您可以执行以下操作。
let loadedImagesEvent = new Event("loadExceptSlowImage")
let loadedImages = []
let lengthOfAllImages = document.querySelectorAll("img").length
let imagesExceptSlowImage = document.querySelectorAll("img:not(#SlowImage)")
imagesExceptSlowImage.forEach((img) => {
img.onload = () => {
loadedImages.push(img)
if (loadedImages.length == lengthOfAllImages - 1) {
window.dispatchEvent(loadedImagesEvent)
}
}
})
window.addEventListener("loadExceptSlowImage",() => {
// Your Code
})
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。