Je veux savoir quand une image a fini de se charger. Existe-t-il un moyen de le faire avec un rappel?
Sinon, y a-t-il un moyen de le faire?
Réponses:
.complete + rappel
Il s'agit d'une méthode conforme aux normes sans dépendances supplémentaires et 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')
})
}
Source: http://www.html5rocks.com/en/tutorials/es6/promises/
img.completeappel et l' addEventListenerappel?
loadécouteur d'événements doit être dans une elseclause, comme cela img.completepeut devenir vrai avant que l' loadévénement ne soit déclenché, donc si ce n'était pas le cas, vous auriez pu potentiellement loadedappeler deux fois (notez que cela est relativement susceptible de changer de sorte que cela img.completene devient vrai que lorsque l'événement les feux).
Image.onload () fonctionnera souvent.
Pour l'utiliser, vous devez vous assurer de lier le gestionnaire d'événements 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>loadévénement n'est pas valide? html.spec.whatwg.org/multipage/webappapis.html#handler-onload est la définition du onload gestionnaire d'événements.
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 au fur et à mesure qu'ils se chargent, j'écris des mises à jour sur un autre div sur 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);
}
Vous pouvez utiliser l'événement load () dans jQuery mais il ne se déclenchera pas toujours si l'image est chargée à partir du 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.
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="">srcavec JS.
myImage.src = https://pmchollywoodlife.files.wordpress.com/2011/12/justin-bieber-bio-photo1.jpg?w=620fait l'affaire.
Voici l'équivalent de jQuery:
var $img = $('img');
if ($img.length > 0 && !$img.get(0).complete) {
$img.on('load', triggerAction);
}
function triggerAction() {
alert('img has been loaded');
}
Ne convient pas pour 2008 lorsque la question a été posée, mais ces jours-ci, cela fonctionne bien pour moi:
async function newImageSrc(src) {
// Get a reference to the image in whatever way suits.
let image = document.getElementById('image-id');
// Update the source.
img.src = src;
// Wait for it to load.
await new Promise((resolve) => { image.onload = resolve; });
// Done!
console.log('image loaded! do something...');
}
ces fonctions résoudront le problème, vous devez implémenter la DrawThumbnailsfonction et avoir une variable globale pour stocker les images. J'adore faire fonctionner cela avec un objet de classe qui a ThumbnailImageArraycomme variable membre, mais j'ai du mal!
appelé comme dans addThumbnailImages(10);
var ThumbnailImageArray = [];
function addThumbnailImages(MaxNumberOfImages)
{
var imgs = [];
for (var i=1; i<MaxNumberOfImages; i++)
{
imgs.push(i+".jpeg");
}
preloadimages(imgs).done(function (images){
var c=0;
for(var i=0; i<images.length; i++)
{
if(images[i].width >0)
{
if(c != i)
images[c] = images[i];
c++;
}
}
images.length = c;
DrawThumbnails();
});
}
function preloadimages(arr)
{
var loadedimages=0
var postaction=function(){}
var arr=(typeof arr!="object")? [arr] : arr
function imageloadpost()
{
loadedimages++;
if (loadedimages==arr.length)
{
postaction(ThumbnailImageArray); //call postaction and pass in newimages array as parameter
}
};
for (var i=0; i<arr.length; i++)
{
ThumbnailImageArray[i]=new Image();
ThumbnailImageArray[i].src=arr[i];
ThumbnailImageArray[i].onload=function(){ imageloadpost();};
ThumbnailImageArray[i].onerror=function(){ imageloadpost();};
}
//return blank object with done() method
//remember user defined callback functions to be called when images load
return { done:function(f){ postaction=f || postaction } };
}
addThumbnailImagesfonction. Réduisez-le au code pertinent et je supprimerai le -1.
Si l'objectif est de styliser l'image une fois que le navigateur a rendu l'image, vous devez:
const img = new Image();
img.src = 'path/to/img.jpg';
img.decode().then(() => {
/* set styles */
/* add img to DOM */
});parce que le navigateur d'abord loads the compressed version of image, puis decodes it, enfin paints. car il n'y a pas d'événement pour paintvous devez exécuter votre logique après que le navigateur ait decodedla balise img.
Si vous utilisez React.js, vous pouvez le faire:
render() {// ...
<img
onLoad={() => this.onImgLoad({ item })}
onError={() => this.onImgLoad({ item })}
src={item.src} key={item.key}
ref={item.key} />// ...}
Où: