load 이벤트에 대한 콜백 메서드

$('select').on(load, function() {
    console.log('#1');
    });
console.log('#2');

이 경우 #2가 먼저 로그가 찍히고, 그 다음 #1이 로그가 찍힌다. 당연한 내용.

그래서 이런 코드가 있다.

$('#content > img').click(
    function() {
        var $this = $(this);
        var title = $this.attr('title');
        
        $desc.html(title).show();
        $loading.show();
        
        $('<img>').on('load', function() {
            var $img = $(this);
            $loading.hide();
            $('#panel').animate({
                'height': '100%'
            }, 500);
            $img.attr('src', $this.attr('src'));
            resize($img);
            $('#wrapper').append($img);
            $img.fadeIn(1000);
            console.log('실행1');
        });
        
        console.log('실행2');
    }
);

이 경우, 실행1은 영원히 실행되지 않는다.

이는 15번 라인 때문인데, $('<img>')로 생성된 이미지 엘리먼트에 src값이 없어서 이미지가 로드가 되지 않기 때문에 load의 콜백이 이루어지지 않기 때문이다.

그래서 src값을 설정하는 15번 라인을 $('<img>')에 붙여줘서 이미지 로드를 완료 시키고 콜백이 이루어지도록 해야 한다.

즉 다음과 같이 수정한다.

$('#content > img').click(
    function() {
        var $this = $(this);
        var title = $this.attr('title');
        
        $desc.html(title).show();
        $loading.show();
        
        $('<img>').on('load', function() {
            var $img = $(this);
            $loading.hide();
            $('#panel').animate({
                'height': '100%'
            }, 500);
            resize($img);
            $('#wrapper').append($img);
            $img.fadeIn(1000);
            console.log('실행1');
        }).attr('src', $this.attr('alt'));
        console.log('실행2');
    }
);

19번 라인을 주목해야한다.