Voglio sapere quando un'immagine ha terminato il caricamento. C'è un modo per farlo con un callback?
Altrimenti, c'è un modo per farlo?
Risposte:
.complete + callback
Questo è un metodo conforme agli standard senza dipendenze extra e non attende più del necessario:
var img = document.querySelector('img')
function loaded() {
alert('loaded')
}
if (img.complete) {
loaded()
} else {
img.addEventListener('load', loaded)
img.addEventListener('error', function() {
alert('error')
})
}
img.completechiamata e la addEventListenerchiamata?
loadlistener di eventi deve essere in una elseclausola, poiché img.completepuò diventare vero prima che l' loadevento venga generato, quindi se non lo fosse potevi potenzialmente loadedchiamare due volte (nota che è relativamente probabile che cambi in modo tale che img.completediventa vero solo quando l'evento incendi).
Image.onload () funzionerà spesso.
Per usarlo, devi essere sicuro di associare il gestore eventi prima di impostare l'attributo src.
Link correlati:
Esempio di utilizzo:
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>loadevento non sia valido? html.spec.whatwg.org/multipage/webappapis.html#handler-onload è la definizione del onload gestore eventi.
È possibile utilizzare la proprietà .complete della classe di immagini Javascript.
Ho un'applicazione in cui memorizzo un numero di oggetti Image in un array, che verranno aggiunti dinamicamente allo schermo e mentre caricano scrivo aggiornamenti su un altro div sulla pagina. Ecco uno snippet di codice:
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);
}
È possibile utilizzare l'evento load () - in jQuery ma non si attiverà sempre se l'immagine viene caricata dalla cache del browser. Questo plugin https://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js può essere utilizzato per risolvere il problema.
La vita è troppo breve per 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="">srccon JS.
myImage.src = https://pmchollywoodlife.files.wordpress.com/2011/12/justin-bieber-bio-photo1.jpg?w=620fa il trucco.
Ecco l'equivalente di jQuery:
var $img = $('img');
if ($img.length > 0 && !$img.get(0).complete) {
$img.on('load', triggerAction);
}
function triggerAction() {
alert('img has been loaded');
}Non adatto per il 2008 quando è stata posta la domanda, ma in questi giorni funziona bene per me:
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...');
}queste funzioni risolveranno il problema, è necessario implementare la DrawThumbnailsfunzione e disporre di una variabile globale per memorizzare le immagini. Adoro farlo funzionare con un oggetto di classe che ha ThumbnailImageArraycome variabile membro, ma sto lottando!
chiamato come in 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 } };
}addThumbnailImagesfunzione. Analizzalo fino al codice pertinente e rimuoverò -1.
Se l'obiettivo è lo stile di img dopo che il browser ha reso l'immagine, dovresti:
const img = new Image();
img.src = 'path/to/img.jpg';
img.decode().then(() => {
/* set styles */
/* add img to DOM */
});perché prima il browser loads the compressed version of image, poi decodes itfinalmente paints. poiché non esiste alcun evento per paintte, dovresti eseguire la tua logica dopo che il browser ha decodedil tag img.
Se stai usando React.js, puoi farlo:
render() {// ...
<img
onLoad={() => this.onImgLoad({ item })}
onError={() => this.onImgLoad({ item })}
src={item.src} key={item.key}
ref={item.key} />// ...}
Dove: