jQuery는 동작이 완료 될 때까지 스크립트를 대기로 만듭니다.

Question

이 코드가 작동 할 때까지 jQuery를 기다리는 것이 가능합니까?

if (hrefs[arrayCounter]) { 
    $('<li>').append($('<img>', { 
     src: hrefs[arrayCounter] 
    }).css({ 
     "height": windowHeight 
    })).appendTo(ul) 
}​ 

이 직후에 이미지가 스크롤되고 스크롤하기 전에 계산 된 너비가 필요합니다. 즉 이미지가로드되는 동안 너무 빨리지나갑니다. 내가 아는 것부터 appendTo()가 콜백을받지 않기 때문에 어떻게해야합니까?

Answer 1

나는 이미지의 .load() 이벤트에 기본적으로 달라 붙어 새로운 코드를 실행합니다. this jsFiddle을 만들었습니다. 이것은 loadable content에 대해서만 작동하지만, 내가 이해 한 내용은 귀하의 필요에 맞는 것으로 보입니다.

엄밀히 말하면 해고하고자하는 코드를 이미지의 .on('load',handler) 이벤트에 바인딩해야합니다.

어떻게 든 도움이 되길 바랍니다.

Answer 2

이 코드를 사용하기 전에 이미지의 onload 이벤트에 브라우저 간 문제가 여러 개 있습니다. They are described in the documentation for jQuery's .load method.

지연된 개체를 만들고 각 이미지의 onload 함수를 기반으로 파이프해야합니다.

는

$.when.apply($,$.map(hrefs, function(href) { 
    var imgLoad = $.Deferred(), 
     $img = $('<img>').css('height',windowHeight); 
    ul.append($('<li>').append($img)); 
    $img.load($.proxy(imgLoad.resolve,imgLoad)); 
    $img.attr('src',href); 
    return imgLoad; 
})).done(function(){ 
    // all images are loaded when this executes 
}) 

이 코드 지연된 오브젝트의 배열로 배열하는 HREF 우회전 jQuery.map를 이용한다. 이미지를 루핑하고 추가하는 동안 각 이미지는 자체의 지연 객체를 얻습니다.이 객체의 .resolve 메서드는 이미지의 .load 처리기에 바인딩됩니다. 이미지가로드되면 지연이 해결됩니다.

이 지연 배열은 jQuery.when에 인수로 적용되며 모든 인수가 해결 될 때 해결되는 약속을 반환합니다.이 경우 모든 이미지가로드되었음을 나타냅니다. 그런 다음 Promise에 .done 콜백을 첨부합니다.