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


답변:


159

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


4
img.complete통화와 통화 사이에 이미지가 완료되면 이것이 잘못 될 수 있습니까 addEventListener?
Thomas Ahle

@ThomasAhle 나는 전문가가 아니지만 가능합니다. 누구든지 해결책이 있는지 봅시다.
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功

병렬 코드에만 문제가 될 것 같습니다. 대부분의 JavaScript는 그렇지 않습니다.
Thomas Ahle

4
@ThomasAhle 이벤트 큐가 회전 된 경우에만 브라우저가로드 이벤트를 발생 시키므로 불가능합니다. 즉, 말했다 load이벤트 리스너가 있어야합니다 에있을 else로서, 절 img.complete전과 사실이 될 수있는 load이벤트가 시작됩니다 그렇지 당신이 잠재적으로 수도 인 경우에 따라서, loaded(이 상대적으로 가능성이 같은 변화에 있다는 것입니다주의 두 번 호출 img.complete만이 진실을 때 이벤트 화재).
gsnedders

72

Image.onload () 가 종종 작동합니다.

이를 사용하려면 src 속성을 설정하기 전에 이벤트 핸들러를 바인드해야합니다.

관련된 링크들:

사용법 예 :

    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>


26
참고 : W3C 사양에 따르면 onload는 IMG 요소에 유효한 이벤트가 아닙니다. 분명히 브라우저가 지원하지만 사양에 관심이 있고 타겟팅하려는 모든 브라우저가이 기능을 지원하는지 100 % 확신 할 수 없다면 다시 생각하거나 적어도 염두에 두십시오.
Jason Bunting 08.

3
소스를 설정하기 위해 5 초 동안 기다리는 것이 왜 나쁜 생각처럼 보입니까?
quemeful

8
@quemeful 그것이 "예"라고 불리는 이유입니다.
Diego Jancic

3
@JasonBunting load이벤트가 유효하지 않다고 생각하는 것은 무엇입니까? html.spec.whatwg.org/multipage/webappapis.html#handler-onloadonload 이벤트 핸들러 의 정의입니다 .
gsnedders

4
@gsnedders-당신은 내가 그 의견을 썼을 때 4.5 년이 지난 현재의 표준이 아니라 현존하는 표준을 언급하고 있다고 생각합니다. 당신이 그때 물었다면, 아마 그것을 지적했을 수 있습니다. 웹의 본질이 맞습니까? 물건이 오래되거나 이동되거나 수정되는 등.
Jason Bunting

20

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

나는 전에 내 작업에서 비슷한 코드를 사용했다. 이것은 모든 브라우저에서 잘 작동합니다.
Gabriel Hurley

2
검사 완료의 문제점은 IE9부터 모든 이미지가로드되기 전에 OnLoad 이벤트가 시작되고 검사 기능에 대한 트리거를 찾기가 어렵다는 것입니다.
Gene Vincent


8

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


1
이것은 훌륭한 답변이지만 많은 코드가 필요하다고 생각하지 않습니다. srcJS 를 추가하여 혼란스럽게 보이게 합니다.
Brandon Benefield

1
프로그래밍에서 시간은 큰 제약입니다. 내 exprience에서 읽을 수있는 (솜씨가 긴) 코드를 작성하면 큰 시간 이점이 있습니다.
Idan Beker

다음 줄에서 소비하기 위해 왜 src를 새 변수에 저장합니까? 간결함이 목표라면 반 패턴입니다. myImage.src = https://pmchollywoodlife.files.wordpress.com/2011/12/justin-bieber-bio-photo1.jpg?w=620트릭을 수행합니다.
Josiah

3

다음은 jQuery에 해당합니다.

var $img = $('img');

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

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

1

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

0

이러한 함수는 문제를 해결하기 위해 함수를 구현 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 } };
}

11
이 코드의 대부분은 전체 addThumbnailImages기능을 포함하여 관련이 없습니다 . 관련 코드로 줄이면 -1을 제거합니다.
Justin Morgan

0

브라우저에서 이미지를 렌더링 한 후 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 태그 가 있으면 로직을 실행해야하는 이벤트가 없기 때문입니다 .


-2

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 ", key : "1"}이 이미지를 "키"로 사용하여 어떤 이미지를 알 수 있습니다 올바르게로드되고로드되지 않습니다.
  • -onError (...) 동일하지만 오류가 있습니다.
  • - "item"객체는 {key : "..", src : ".."}와 유사합니다. 이미지 목록에서 사용하기 위해 이미지의 URL과 키를 저장하는 데 사용할 수 있습니다.

  • 당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
    Licensed under cc by-sa 3.0 with attribution required.