jQuery dynamic image loading

**I try to load an image when I type a reference in an input.

<!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>

The fadeIn() doesn't work, except if the image is already in cache. How can I have a fadeIn each time? Thanx in advance.

EDIT

Another script, it works!

<!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>

标签： jquery image input loading fadein

1条回答

啃猪蹄的小仙女

2楼-- · 2019-02-26 06:51

You should go ahead and cache the image (pre-load it into a variable) so that you can access it quickly. You also might want to make use of jQuery's load() function to tell you when the image has been loaded. Here's a quick example:

var theCachedImage = new Image();
/* Boolean that tells us whether or not the image has finished loading. */
var theBoolean;
$(theCachedImage).load(function () {
    In this callback, the image has finished loading.Set "theBoolean"
    to true.
    theBoolean = true;
});
theCachedImage.src = "your/image/source";

Like Kevin mentioned, the fadeIn is working. There's just nothing to fade in.

EDIT:

In your keyUp function, simply check the value of the conditional boolean and perform actions accordingly. Example:

$('#id').keyup(function () {
    if (theBoolean) {
        $('#img').html('<img src="http://www.site.com/' + $(this).val() + '.jpg"
width="200px">');
        $('#img').hide().fadeIn('slow');
    } else {
        /* Your image hasn't been loaded yet. Do something to let the user know
         * or figure out the appropriate action to take. */
    }
});

0人赞添加讨论(0) 举报

jQuery dynamic image loading

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间