چگونه میتوانم یک تابع بازخوانی جاوااسکریپت را وقتی یک تصویر بارگذاری شد اجرا کنم؟

میخواهم بدانم چه زمانی یک تصویر بارگذاری شده است. آیا راهی وجود دارد که این کار را با یک callback انجام داد؟

اگر نه، آیا بهطور کلی راهی برای انجام آن وجود دارد؟

پاسخ شماره ۱

.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/

پاسخ شماره ۲

Image.onload() اغلب کار خواهد کرد.

برای استفاده از آن، باید مطمئن شوید که قبل از تنظیم ویژگی src، هندلر رویداد را متصل کردهاید.

لینکهای مرتبط:

• موزیلا درباره 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>

پاسخ شماره ۳

شما میتوانید از ویژگی .complete کلاس تصویر جاوااسکریپت استفاده کنید.

من یک برنامه دارم که در آن تعداد زیادی شیء تصویر را در یک آرایه ذخیره میکنم، که به صورت پویا به صفحه اضافه خواهند شد، و در حالی که در حال بارگذاری هستند، من به یک 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);
}

پاسخ شماره ۴

زندگی برای جیکوئری خیلی کوتاه است.

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="">

پاسخ شماره ۵

شما میتوانید از رویداد load() در jQuery استفاده کنید اما این رویداد همیشه اجرا نمیشود اگر تصویر از کش مرورگر بارگذاری شود. این افزونه https://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js میتواند برای رفع این مشکل استفاده شود.