Jak utworzyć wywołanie zwrotne JavaScript, aby wiedzieć, kiedy ładowany jest obraz?

Chcę wiedzieć, kiedy obraz się załadował. Czy można to zrobić za pomocą oddzwonienia?

Jeśli nie, to czy w ogóle jest na to sposób?

.complete + oddzwonienie

Jest to metoda zgodna ze standardami bez dodatkowych zależności i czeka nie dłużej niż to konieczne:

var img = document.querySelector('img')

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

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

Źródło: http://www.html5rocks.com/en/tutorials/es6/promises/

Image.onload () często działa.

Aby go użyć, musisz upewnić się, że powiązałeś program obsługi zdarzeń przed ustawieniem atrybutu src.

Powiązane linki:

• Mozilla na Image.onload ()

Przykładowe zastosowanie:

    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>

Możesz użyć właściwości .complete klasy obrazu Javascript.

Mam aplikację, w której przechowuję wiele obiektów Image w tablicy, która będzie dynamicznie dodawana do ekranu, a gdy się ładują, piszę aktualizacje do innego div na stronie. Oto fragment kodu:

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

Możesz użyć zdarzenia load () - w jQuery, ale nie zawsze będzie ono uruchamiane, jeśli obraz zostanie załadowany z pamięci podręcznej przeglądarki. Ta wtyczka https://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js może zostać użyta do rozwiązania tego problemu.

Życie jest za krótkie dla 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="">

Oto odpowiednik jQuery:

var $img = $('img');

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

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

Nie nadaje się na rok 2008, kiedy zadano pytanie, ale obecnie działa to dobrze:

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

te funkcje rozwiążą problem, musisz zaimplementować DrawThumbnailsfunkcję i mieć zmienną globalną do przechowywania obrazów. Uwielbiam to, aby działało z obiektem klasy, który ma ThumbnailImageArrayzmienną składową, ale mam problemy!

zadzwonił jak w 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 } };
}

Jeśli celem jest nadanie stylu img po wyrenderowaniu obrazu przez przeglądarkę, należy:

const img = new Image();
img.src = 'path/to/img.jpg';

img.decode().then(() => {
/* set styles */
/* add img to DOM */ 
});

ponieważ najpierw przeglądarka loads the compressed version of image, potem na decodes itkońcu paints. ponieważ nie ma zdarzenia, dla paintktórego należy uruchomić logikę po tym, jak przeglądarka ma decodedtag img.

Jeśli używasz React.js, możesz to zrobić:

render() {

// ...

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

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

// ...}

Gdzie: