Je veux savoir quand une image a fini de se charger. Y a-t-il un moyen de le faire avec un callback ?
Sinon, existe-t-il un moyen de le faire ?
Réponses
Trop de publicités?
Ciro Santilli
Points
3341
.complete + callback
Il s'agit d'une méthode conforme aux normes, sans dépendances supplémentaires, qui n'attend pas plus longtemps que nécessaire :
var img = document.querySelector('img')
function loaded() {
alert('loaded')
}
if (img.complete) {
loaded()
} else {
img.addEventListener('load', loaded)
img.addEventListener('error', function() {
alert('error')
})
}Fuente: http://www.html5rocks.com/en/tutorials/es6/promises/
keparo
Points
13747
Image.onload() fonctionnera souvent.
Pour l'utiliser, vous devez vous assurer de lier le gestionnaire d'événement avant de définir l'attribut src.
Liens connexes :
Exemple d'utilisation :
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>
Jon DellOro
Points
368
Vous pouvez utiliser la propriété .complete de la classe d'image Javascript.
J'ai une application où je stocke un certain nombre d'objets Image dans un tableau, qui seront ajoutés dynamiquement à l'écran, et pendant qu'ils se chargent, j'écris des mises à jour dans un autre div de la page. Voici un extrait de code :
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);
}
Idan Beker
Points
173
La vie est trop courte pour 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="">
Jimmy
Points
3962
Vous pourriez utiliser l'événement load()- dans jQuery mais il ne se déclenchera pas toujours si l'image est chargée depuis le cache du navigateur. Ce plugin https://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js peut être utilisé pour remédier à ce problème.
- Réponses précédentes
- Plus de réponses
