tipos - ¿Cómo crear una devolución de llamada de JavaScript para saber cuándo se carga una imagen?

tablas en javascript ejemplos

Question

Quiero saber cuándo se terminó de cargar una imagen. ¿Hay alguna manera de hacerlo con una devolución de llamada?

Si no, ¿hay alguna manera de hacerlo?

Answer 1

Aquí está el equivalente de jQuery:

var $img = $(''img'');

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

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

Answer 2

La vida es demasiado corta para 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="">

Answer 3

Puede usar la propiedad .complete de la clase de imagen de Javascript.

Tengo una aplicación en la que almaceno una cantidad de objetos de imagen en una matriz, que se agregará dinámicamente a la pantalla, y mientras se cargan, escribo actualizaciones en otro div en la página. Aquí hay un fragmento de código:

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);
}

Answer 4

Puede usar load () - event en jQuery pero no siempre se activará si la imagen se carga desde el caché del navegador. Este complemento https://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js se puede usar para solucionar ese problema.

Answer 5

Si está utilizando React.js, podría hacer esto:

render() {

// ...

<img 
onLoad={() => this.onImgLoad({ item })}
onError={() => this.onImgLoad({ item })}

src={item.src} key={item.key}
ref={item.key} />

// ...}

Dónde:

- onLoad (...) ahora se llamará con algo como esto: {src: " ", clave: "1"} puede usar esto como "clave" para saber qué imágenes está cargado correctamente y cual no.

- onError (...) es lo mismo pero para errores.

- El objeto "elemento" es algo así como {key: "..", src: ".."} que puede usar para almacenar la URL y la clave de las imágenes para usarlas en una lista de imágenes.

Answer 6

estas funciones resolverán el problema, debe implementar la función DrawThumbnails y tener una variable global para almacenar las imágenes. Me encanta hacer que esto funcione con un objeto de clase que tiene el ThumbnailImageArray como una variable miembro, ¡pero estoy luchando!

llamado como en 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 } };
}

Answer 7

.complete + callback es compatible con los estándares, no es una forma de biblioteca. Esto no espera más de lo necesario:

var img = document.querySelector(''img'')

function loaded() {
  alert(''loaded'')
}

if (img.complete) {
  loaded()
} else {
  img.addEventListener(''load'', loaded)
  img.addEventListener(''error'', function() {
      alert(''error'')
  })
}

Fuente: http://www.html5rocks.com/en/tutorials/es6/promises/

Answer 8

Image.onload () a menudo funcionará.

Para usarlo, deberá asegurarse de vincular el controlador de eventos antes de establecer el atributo src.

Enlaces relacionados:

• Mozilla en Image.onload ()

Ejemplo de uso:

<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://.com/Content/Img/-logo-250.png'';         
    }, 5000);
};
</script>
</body>
</html>