2

**当我在输入中键入引用时，我尝试加载图像。

<!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() 不起作用，除非图像已经在缓存中。我怎样才能每次都有一个淡入淡出？提前谢谢。

编辑

另一个脚本，它有效！

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

1 回答 1

2

您应该继续缓存图像（将其预加载到变量中），以便您可以快速访问它。您可能还想使用 jQuery 的load()函数来告诉您图像何时加载。这是一个简单的例子：

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";

就像凯文提到的那样，fadeIn 正在工作。没有什么可以淡入的。

编辑：

在您的keyUp函数中，只需检查条件布尔值并相应地执行操作。例子：

$('#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. */
    }
});
于 2013-08-29T18:58:56.193 回答