web-dev-qa-db-fra.com

Comment créer un rappel JavaScript pour savoir quand une image est chargée?

Je veux savoir quand le chargement d'une image est terminé. Est-il possible de le faire avec un rappel?

Si non, y a-t-il un moyen de le faire?

javascriptimagecallbackloading
114
matt

.complete + rappel

Ceci est une méthode conforme aux normes sans dépendances supplémentaires, et n'attend pas plus 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/

122
Ciro Santilli 新疆改造中心996ICU六四事件

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 associés:

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>
61
keparo

Vous pouvez utiliser la propriété .complete de la classe d'images Javascript.

J'ai une application dans laquelle je stocke un certain nombre d'objets Image dans un tableau, que je vais ajouter dynamiquement à l'écran et pendant le chargement, j'écris les mises à jour dans un autre div de 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);
}
20
Jon DellOro

Vous pouvez utiliser l'événement load () dans jQuery, mais il ne se déclenche 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.

10
jimmystormig

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="">
8
Idan Beker

Voici l'équivalent jQuery:

var $img = $('img');

if ($img.length > 0 && !$img.get(0).complete) {
   $img.on('load', triggerAction);
}

function triggerAction() {
   alert('img has been loaded');
}
2
Alexander Drobyshevsky

ces fonctions vont résoudre le problème, vous devez implémenter la fonction DrawThumbnails et disposer d'une variable globale pour stocker les images. J'aime faire en sorte que cela fonctionne avec un objet de classe ayant la variable membre ThumbnailImageArray, mais je me bats!

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 } };
}
0
dave