Ich möchte wissen, wann ein Bild geladen ist. Gibt es eine Möglichkeit, dies mit einem Rückruf zu tun?Javascript Rückruf, um zu wissen, wenn ein Bild geladen wird
Wenn nicht, gibt es einen Weg, es überhaupt zu tun?
Image.onload() wird oft funktionieren.
Um es zu verwenden, müssen Sie sicher sein, den Ereignishandler zu binden, bevor Sie das Src-Attribut festlegen.
Related Links:
Verwendungsbeispiel:
<html>
<head>
<title>Image onload()</title>
</head>
<body>
<img src="#" alt="This image is going to load" id="sologo"/>
<script type="text/javascript">
window.onload = function() {
var logo = document.getElementById('sologo');
logo.onload = function() {
alert ("The image has loaded!");
};
setTimeout(function(){
logo.src = 'http://stackoverflow.com/Content/Img/stackoverflow-logo-250.png';
}, 5000);
};
</script>
</body>
</html>
Sie haben die Eigenschaft Das Gesamt der Bildklasse Javascript verwenden können.
Ich habe eine Anwendung, wo ich eine Anzahl von Image-Objekten in einem Array speichern, die dynamisch zum Bildschirm hinzugefügt werden, und während sie laden, schreibe ich Updates in ein anderes Div auf der Seite. Hier ist ein Code-Schnipsel:
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);
}
Ich habe ähnlichen Code in meiner Arbeit zuvor verwendet. Dies funktioniert in allen Browsern gut. –
Das Problem mit der Überprüfung abgeschlossen ist, dass beginnend mit IE9 die OnLoad Ereignisse ausgelöst werden, bevor alle Bilder geladen werden und es schwer ist, einen Trigger für die Prüffunktion jetzt zu finden. –
Sie könnten die Last() verwenden - Ereignis in jQuery, aber es wird 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.
danke für das Onload-Cache-Problem! – hellectronic
Diese Funktionen lösen das Problem, Sie müssen die DrawThumbnails-Funktion implementieren und eine globale Variable zum Speichern der Bilder haben. Ich liebe, dies mit einem Klassenobjekt zu arbeiten, das die ThumbnailImageArray als eine Mitgliedsvariable hat, aber ich kämpfe!
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 } };
}
Der meiste Code ist irrelevant, einschließlich Ihrer gesamten 'addThumbnailImages' -Funktion. Pare es bis zum relevanten Code und ich werde die -1 entfernen. –
.complete + Rückruf ist ein standardkonformes, keine Bibliothek Art und Weise genannt. Diese wartet nicht mehr 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/en/tutorials/es6/promises/
Kann dies schief gehen, wenn das Bild zwischen dem Aufruf 'img.complete' und dem Aufruf 'addEventListener' abgeschlossen wird? –
@ThomasAhle Ich bin kein Experte, aber das scheint möglich. Mal sehen, ob jemand eine Lösung hat. –
Ich denke, es wäre nur ein Problem für parallelen Code, die meisten Javascript wahrscheinlich nicht .. –
Hier ist jQuery-Äquivalent:
var $img = $('img');
if ($img.length > 0 && !$img.get(0).complete) {
$img.on('load', triggerAction);
}
function triggerAction() {
alert('img has been loaded');
}
Leben ist zu kurz für 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="">
FYI: die W3C-Spezifikation ot Laut ist onload kein gültiges Ereignis für IMG Elemente. Offensichtlich unterstützen Browser es, aber wenn Sie sich für die Spezifikation interessieren und nicht 100% ig sicher sind, dass alle Browser, auf die Sie zielen wollen, dies unterstützen, sollten Sie es vielleicht überdenken oder zumindest im Hinterkopf behalten. –
Genau richtig. Achten Sie darauf, zu testen, vor allem, wenn Sie einige der obskuren Browser unterstützen möchten. – keparo
Warum scheint es 5 Sekunden zu warten, bis die Quelle eingestellt ist? – quemeful