我想知道图像何时完成加载。有没有办法通过回调来做到这一点？
如果没有，有没有办法做到这一点？
如何创建 JavaScript 回调以了解何时加载图像？
IT技术
javascript
image
callback
loading
2021-01-18 21:22:35
6个回答
.complete + 回调
这是一种符合标准的方法，没有额外的依赖，等待时间不会超过必要的：
var img = document.querySelector('img')
function loaded() {
alert('loaded')
}
if (img.complete) {
loaded()
} else {
img.addEventListener('load', loaded)
img.addEventListener('error', function() {
alert('error')
})
}
Image.onload()通常会起作用。
要使用它，您需要确保在设置 src 属性之前绑定事件处理程序。
相关链接：
示例用法：
window.onload = function () {
var logo = document.getElementById('sologo');
logo.onload = function () {
alert ("The image has loaded!");
};
setTimeout(function(){
logo.src = 'https://edmullen.net/test/rc.jpg';
}, 5000);
}; <html>
<head>
<title>Image onload()</title>
</head>
<body>
<img src="#" alt="This image is going to load" id="sologo"/>
<script type="text/javascript">
</script>
</body>
</html>您可以使用 Javascript 图像类的 .complete 属性。
我有一个应用程序，我将多个 Image 对象存储在一个数组中，这些对象将动态添加到屏幕上，并且在加载它们时，我将更新写入页面上的另一个 div。这是一个代码片段：
var gAllImages = [];
function makeThumbDivs(thumbnailsBegin, thumbnailsEnd)
{
gAllImages = [];
for (var i = thumbnailsBegin; i < thumbnailsEnd; i++)
{
var theImage = new Image();
theImage.src = "thumbs/" + getFilename(globals.gAllPageGUIDs[i]);
gAllImages.push(theImage);
setTimeout('checkForAllImagesLoaded()', 5);
window.status="Creating thumbnail "+(i+1)+" of " + thumbnailsEnd;
// make a new div containing that image
makeASingleThumbDiv(globals.gAllPageGUIDs[i]);
}
}
function checkForAllImagesLoaded()
{
for (var i = 0; i < gAllImages.length; i++) {
if (!gAllImages[i].complete) {
var percentage = i * 100.0 / (gAllImages.length);
percentage = percentage.toFixed(0).toString() + ' %';
userMessagesController.setMessage("loading... " + percentage);
setTimeout('checkForAllImagesLoaded()', 20);
return;
}
}
userMessagesController.setMessage(globals.defaultTitle);
}
生命对于 jquery 来说太短暂了。
function waitForImageToLoad(imageElement){
return new Promise(resolve=>{imageElement.onload = resolve})
}
var myImage = document.getElementById('myImage');
var newImageSrc = "https://pmchollywoodlife.files.wordpress.com/2011/12/justin-bieber-bio-photo1.jpg?w=620"
myImage.src = newImageSrc;
waitForImageToLoad(myImage).then(()=>{
// Image have loaded.
console.log('Loaded lol')
});<img id="myImage" src="">您可以在 jQuery 中使用 load() 事件，但如果从浏览器缓存加载图像，它不会总是触发。这个插件https://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js可以用来解决这个问题。
其它你可能感兴趣的问题