JQuery динамическая загрузка изображений
** Я пытаюсь загрузить изображение, когда набираю ссылку на входе.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#id').focus();
$('#id').keyup(function () {
$('#img').html('<img src="http://www.site.com/' + $(this).val() + '.jpg"
width="200px">');
$('#img').hide().fadeIn('slow');
});
});
</script>
</head>
<body>
<input type="text" size="7" maxlength="7" id="id">
<div id="img"></div>
</body>
</html>
FadeIn () не работает, за исключением случаев, когда изображение уже находится в кеше. Как я могу иметь FadeIn каждый раз? Спасибо заранее.
РЕДАКТИРОВАТЬ
Еще один скрипт, он работает!
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#id').focus();
$('#id').keyup(function () {
$('#img').attr('src', 'http://www.site.com/' + $(this).val() + '.jpg');
$('#img').hide();
});
$('#img').load(function () {
$('#img').fadeIn('slow');
});
});
</script>
</head>
<body>
<input type="text" size="7" maxlength="7" id="id">
<br>
<img id="img" width="200px">
</body>
</html>