Ich möchte wissen, wann ein Bild vollständig geladen wurde. Gibt es eine Möglichkeit, dies mit einem Rückruf zu tun?
Wenn nicht, gibt es überhaupt eine Möglichkeit, dies zu tun?
Antworten:
.complete + Rückruf
Dies ist eine standardkonforme Methode ohne zusätzliche Abhängigkeiten und wartet nicht länger als nötig:
var img = document.querySelector('img')
function loaded() {
alert('loaded')
}
if (img.complete) {
loaded()
} else {
img.addEventListener('load', loaded)
img.addEventListener('error', function() {
alert('error')
})
}Quelle: http://www.html5rocks.com/de/tutorials/es6/promises/
img.completeAnruf und dem addEventListenerAnruf abgeschlossen ist?
loadEreignis-Listener muss sich jedoch in einer elseKlausel befinden, img.completedie vor dem loadAuslösen des Ereignisses wahr werden kann. Wenn dies nicht der Fall wäre, hätten Sie möglicherweise loadedzweimal anrufen können (beachten Sie, dass sich dies relativ wahrscheinlich so ändert, dass es img.completeerst dann wahr wird, wenn das Ereignis eintritt Feuer).
Image.onload () funktioniert oft.
Um es zu verwenden, müssen Sie sicherstellen, dass Sie den Ereignishandler binden, bevor Sie das src-Attribut festlegen.
Verwandte Links:
Anwendungsbeispiel:
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>loadVeranstaltung nicht gültig ist? html.spec.whatwg.org/multipage/webappapis.html#handler-onload ist die Definition des onload Ereignishandlers.
Sie können die Eigenschaft .complete der Javascript-Bildklasse verwenden.
Ich habe eine Anwendung, in der ich eine Reihe von Bildobjekten in einem Array speichere, die dynamisch zum Bildschirm hinzugefügt werden. Beim Laden schreibe ich Aktualisierungen in ein anderes Div auf der Seite. Hier ist ein Code-Snippet:
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);
}Sie können das Ereignis load () - in jQuery verwenden, es wird jedoch nicht immer ausgelöst, wenn das Bild aus dem Browser-Cache geladen wird. Dieses Plugin https://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js kann verwendet werden, um dieses Problem zu beheben.
Das Leben ist zu kurz für Fragen.
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="">srcmit JS hinzufügen .
myImage.src = https://pmchollywoodlife.files.wordpress.com/2011/12/justin-bieber-bio-photo1.jpg?w=620macht den Trick.
Hier ist das jQuery-Äquivalent:
var $img = $('img');
if ($img.length > 0 && !$img.get(0).complete) {
$img.on('load', triggerAction);
}
function triggerAction() {
alert('img has been loaded');
}Nicht geeignet für 2008, als die Frage gestellt wurde, aber heutzutage funktioniert das gut für mich:
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...');
}Diese Funktionen lösen das Problem. Sie müssen die DrawThumbnailsFunktion implementieren und eine globale Variable zum Speichern der Bilder haben. Ich liebe es, dies mit einem Klassenobjekt zum Laufen zu bringen, das die ThumbnailImageArrayVariable als Mitglied hat, aber ich habe Probleme!
genannt wie 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 } };
}addThumbnailImagesFunktion. Reduzieren Sie es auf den entsprechenden Code und ich werde die -1 entfernen.
Wenn das Ziel darin besteht, das Bild zu formatieren, nachdem der Browser das Bild gerendert hat, sollten Sie:
const img = new Image();
img.src = 'path/to/img.jpg';
img.decode().then(() => {
/* set styles */
/* add img to DOM */
});weil der browser erst loads the compressed version of imagedann decodes itendlich paints. Da es kein Ereignis paintgibt, sollten Sie Ihre Logik ausführen, nachdem der Browser decodeddas img-Tag hat.
Wenn Sie React.js verwenden, können Sie Folgendes tun:
render() {// ...
<img
onLoad={() => this.onImgLoad({ item })}
onError={() => this.onImgLoad({ item })}
src={item.src} key={item.key}
ref={item.key} />// ...}
Wo: