썸네일 이미지를 클릭하면 창이 하나 쭈욱 올라오면서
해당 썸네일 이미지 alt속성에 있던 이미지 주소를 따와서 이미지를 보여주는걸 구현하고 있는데요.
$('#content > img').클릭(
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.appendTo('#wrapper');
$img.fadeIn(1000);
}).attr('src', $this.attr('alt'));
}
);
얘는 되고
$('#content > img').클릭(
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.appendTo('#wrapper');
$img.attr('src', $this.attr('alt'));
$img.fadeIn(1000);
});
}
);
얘는 안되는 이유가 뭐죠?
(클릭이 금지어라 한글로 썼음)
이유 찾았네요. load가 완료되어야 콜백되는데, attr이 콜백 안에 있으면 $('<img>')로 생성한 엘리먼트에 src값이 없어서 이미지가 로딩이 되지 않고 따라서 load의 콜백메서드가 발생조차 하지 않더라구여. 답변 감사합니당