วิธีสร้างการเรียกกลับ JavaScript เพื่อให้ทราบเมื่อโหลดรูปภาพ

Question 1

ฉันต้องการทราบว่าเมื่อภาพโหลดเสร็จแล้ว มีวิธีการโทรกลับหรือไม่?

ถ้าไม่มีวิธีทำเลยหรือไม่?

Question 2

.complete + โทรกลับ

นี่เป็นวิธีการที่สอดคล้องกับมาตรฐานโดยไม่มีการอ้างอิงเพิ่มเติมและรอไม่นานเกินความจำเป็น:

var img = document.querySelector('img')

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

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

ที่มา: http://www.html5rocks.com/en/tutorials/es6/promises/

Question 3

Image.onload ()มักจะใช้งานได้

ในการใช้งานคุณต้องแน่ใจว่าได้ผูกตัวจัดการเหตุการณ์ก่อนที่คุณจะตั้งค่าแอตทริบิวต์ src

ลิงก์ที่เกี่ยวข้อง:

Mozilla บน Image.onload ()

ตัวอย่างการใช้งาน:

    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>

ขยายข้อมูลโค้ด

Question 4

คุณสามารถใช้คุณสมบัติ. complete ของคลาสรูปภาพ Javascript

ฉันมีแอปพลิเคชันที่ฉันเก็บออบเจ็กต์รูปภาพจำนวนหนึ่งไว้ในอาร์เรย์ซึ่งจะถูกเพิ่มลงในหน้าจอแบบไดนามิกและในขณะที่กำลังโหลดฉันจะเขียนอัปเดตไปยัง div อื่นบนหน้า นี่คือข้อมูลโค้ด:

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

คุณสามารถใช้ load () - เหตุการณ์ใน jQuery ได้ แต่จะไม่เริ่มทำงานเสมอไปหากรูปภาพถูกโหลดจากแคชของเบราว์เซอร์ ปลั๊กอินhttps://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.jsนี้สามารถใช้เพื่อแก้ไขปัญหานั้นได้

Question 6

ชีวิตสั้นเกินไปสำหรับ 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="">

ขยายข้อมูลโค้ด

Question 7

นี่คือ 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

หากเป้าหมายคือการจัดรูปแบบ img หลังจากที่เบราว์เซอร์แสดงภาพแล้วคุณควร:

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

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

เนื่องจากเบราว์เซอร์ครั้งแรกloads the compressed version of imageแล้วdecodes itในที่สุดpaintsมัน เนื่องจากไม่มีเหตุการณ์ที่paintคุณควรเรียกใช้ตรรกะของคุณหลังจากที่เบราว์เซอร์มีdecodedแท็ก img

Question 9

ไม่เหมาะกับปี 2008 เมื่อคำถามถูกถาม แต่ทุกวันนี้สิ่งนี้ใช้ได้ดีสำหรับฉัน:

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

ฟังก์ชันเหล่านี้จะแก้ปัญหาได้คุณต้องใช้DrawThumbnailsฟังก์ชันและมีตัวแปรส่วนกลางเพื่อเก็บภาพ ฉันชอบที่จะให้สิ่งนี้ทำงานกับคลาสออบเจ็กต์ที่มีThumbnailImageArrayตัวแปรเป็นสมาชิก แต่ฉันกำลังดิ้นรน!

เรียกว่าเป็นใน 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

หากคุณใช้ React.js คุณสามารถทำได้:

render() {

// ...

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

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

// ... }

ที่ไหน:

- onLoad (... ) จะเรียกด้วยสิ่งนี้: {src: " https: //......png ", คีย์: "1"} คุณสามารถใช้สิ่งนี้เป็น "คีย์" เพื่อทราบว่าภาพใด โหลดอย่างถูกต้องและไม่

- onError (... ) เหมือนกัน แต่มีข้อผิดพลาด

- ออบเจ็กต์ "item" คือ {คีย์: ".. ", src: ".. "} นี้คุณสามารถใช้เก็บ URL และคีย์ของรูปภาพเพื่อใช้ในรายการรูปภาพได้