[javascript] 이미지가 언제로드되는지 알기 위해 JavaScript 콜백을 만드는 방법은 무엇입니까?

이미지로드가 완료된시기를 알고 싶습니다. 콜백으로 할 수있는 방법이 있습니까?

그렇지 않다면 전혀 할 수있는 방법이 있습니까?

답변

.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 ()의 Mozilla

사용법 예 :

    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>

스 니펫 확장

답변

Javascript 이미지 클래스의 .complete 속성을 사용할 수 있습니다.

배열에 여러 Image 객체를 저장하는 응용 프로그램이 있으며 화면에 동적으로 추가되며로드 할 때 페이지의 다른 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);
}

답변

jQuery에서 load ()-event를 사용할 수는 있지만 이미지가 브라우저 캐시에서로드되는 경우 항상 발생하지는 않습니다. 이 플러그인 https://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js 를 사용하여 해당 문제를 해결할 수 있습니다.

답변

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

스 니펫 확장

답변

다음은 jQuery에 해당합니다.

var $img = $('img');

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

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

답변

질문이 제기 된 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...');
}