Voglio sapere quando un'immagine ha terminato il caricamento. C'è un modo per farlo con un callback?
Altrimenti, c'è un modo per farlo?
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.complete
chiamata e la addEventListener
chiamata?
load
listener di eventi deve essere in una else
clausola, poiché img.complete
può diventare vero prima che l' load
evento venga generato, quindi se non lo fosse potevi potenzialmente loaded
chiamare due volte (nota che è relativamente probabile che cambi in modo tale che img.complete
diventa 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>
load
evento 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="">
src
con JS.
myImage.src = https://pmchollywoodlife.files.wordpress.com/2011/12/justin-bieber-bio-photo1.jpg?w=620
fa 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 DrawThumbnails
funzione e disporre di una variabile globale per memorizzare le immagini. Adoro farlo funzionare con un oggetto di classe che ha ThumbnailImageArray
come 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 } };
}
addThumbnailImages
funzione. 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 it
finalmente paints
. poiché non esiste alcun evento per paint
te, dovresti eseguire la tua logica dopo che il browser ha decoded
il 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: