Bagaimana cara membuat panggilan balik JavaScript untuk mengetahui kapan gambar dimuat?

Question 1

Saya ingin tahu kapan gambar telah selesai dimuat. Apakah ada cara untuk melakukannya dengan panggilan balik?

Jika tidak, apakah ada cara untuk melakukannya?

Question 2

.complete + panggilan balik

Ini adalah metode yang sesuai standar tanpa ketergantungan tambahan, dan menunggu tidak lebih lama dari yang diperlukan:

var img = document.querySelector('img')

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

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

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

Question 3

Image.onload () akan sering berfungsi.

Untuk menggunakannya, Anda harus memastikan untuk mengikat pengendali kejadian sebelum Anda menyetel atribut src.

Tautan yang berhubungan:

Mozilla pada Image.onload ()

Contoh Penggunaan:

    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>

Luaskan cuplikan

Question 4

Anda dapat menggunakan properti .complete dari kelas gambar Javascript.

Saya memiliki aplikasi tempat saya menyimpan sejumlah objek Gambar dalam sebuah array, yang akan ditambahkan secara dinamis ke layar, dan saat dimuat, saya menulis pembaruan ke div lain di halaman. Berikut cuplikan kodenya:

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

Question 5

Anda bisa menggunakan event load () - di jQuery tetapi itu tidak akan selalu aktif jika gambar dimuat dari cache browser. Plugin https://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js ini dapat digunakan untuk mengatasi masalah tersebut.

Question 6

Hidup ini terlalu singkat untuk 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="">

Luaskan cuplikan

Question 7

Berikut ini setara dengan jQuery:

var $img = $('img');

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

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

Question 8

Jika tujuannya adalah untuk memberi gaya pada img setelah browser merender gambar, Anda harus:

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

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

karena browser pertama loads the compressed version of image, lalu decodes it, akhirnya paints. karena tidak ada acara untuk paintAnda harus menjalankan logika Anda setelah browser memiliki decodedtag img.

Question 9

Tidak sesuai untuk tahun 2008 ketika pertanyaan itu diajukan, tetapi sekarang ini bekerja dengan baik untuk saya:

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

Question 10

fungsi-fungsi ini akan menyelesaikan masalah, Anda perlu mengimplementasikan DrawThumbnailsfungsi tersebut dan memiliki variabel global untuk menyimpan gambar. Saya suka membuat ini bekerja dengan objek kelas yang memiliki ThumbnailImageArrayvariabel sebagai anggota, tapi saya kesulitan!

dipanggil sebagai di 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 } };
}

Question 11

Jika Anda menggunakan React.js, Anda dapat melakukan ini:

render() {

// ...

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

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

// ...}

Dimana:

- onLoad (...) sekarang akan dipanggil dengan sesuatu seperti ini: {src: " https: //......png ", key: "1"} Anda dapat menggunakan ini sebagai "key" untuk mengetahui gambar yang mana dimuat dengan benar dan mana yang tidak.

- onError (...) sama tetapi untuk kesalahan.

- objek "item" adalah sesuatu seperti ini {key: "..", src: ".."} yang dapat Anda gunakan untuk menyimpan URL dan kunci gambar agar dapat digunakan dalam daftar gambar.