jQuery dynamic image laden

**Ich versuche, ein Bild zu laden geben, wenn ich einen Verweis in ein 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>

Dem fadeIn() nicht funktioniert, außer wenn das Bild bereits im cache. Wie kann ich ein fadeIn jedes mal? Danke im Voraus.

BEARBEITEN

Einem anderen script, es funktioniert!

<!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>
Die fadeIn funktioniert, die Sie gerade nicht geben ihn etwas ZU fade, weil das Bild nicht geladen noch. Sie brauchen, um pre-load das Bild.
Ich sehe nicht ein problem mit ihm: jsfiddle.net/JTJKd/2
Ich denke, es gibt kein problem mit Google Bilder, da Sie sehr klein sind.

InformationsquelleAutor Kernel | 2013-08-29

  1. 2

    Sollten Sie voran gehen und cache-Bild (pre-load in eine variable), so dass Sie schnell zugreifen können. Vielleicht möchten Sie auch zu nutzen jQuery load() Funktion, Ihnen zu sagen, wenn das Bild geladen wurde. Hier ein kurzes Beispiel:

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

    Wie Kevin erwähnt, die fadeIn funktioniert. Es gibt einfach nichts zu verblassen.

    EDIT:

    In Ihrem keyUp - Funktion, prüfen Sie einfach den Wert der bedingten boolean und Aktionen entsprechend. Beispiel:

    $('#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. */
    }
});
    Danke, aber ich weiß nicht, wie die load () - Funktion mit dem keyup ().
    Ich aktualisiert meine Antwort mit einem Beispiel.
    Danke für Eure Bemühungen, ich aktualisiert mein Skript und es funktioniert jetzt!
    Du bist herzlich willkommen. Happy coding!
    Kann ich das laden von Bildern dynamisch, mit riesigen keine.von Bilder. Wie habe ich die 200 Bilder, und ich zeige Bilder, die auf Folie zeigen, kann ich das laden von Bildern in einer Reihe von 10 Bilder pro set???

    InformationsquelleAutor Don

Schreibe einen Kommentar