JQuery - Bilder Vorausladen (mit JQuery / native JavaScript / CSS)

Ich zuvor eine Frage gestellt hat, wie fahren mit dem Mauszeiger über ein kleines Bild, und laden Sie ein zusätzliche Bild auf der rechten Seite der Seite. Ich habe alles korrekt funktioniert, aber jetzt will ich Bilder Vorausladen".

Wie kann ich das laden eines Bildes unter Verwendung von JQuery, so dass ich zeigen kann, es sofort an den Benutzer, wenn ich will (ohne Ladezeit)?

Das ist so ziemlich eine doppelte Frage. Keine Notwendigkeit von jQuery, preload images. Eine einfache Suche, hier finden Sie Dutzende von Beiträgen zu diesem Thema. Hier ist einer, sogar rufen Sie zurück, wenn Sie alle geladen: Bild preloader javascript unterstützt Veranstaltungen

InformationsquelleAutor Matt | 2013-10-31

  1. 11

    Können Sie laden eines Bildes ganz einfach wie folgt:

    mit JQuery

    function preloadImg(src) {
    $('<img/>')[0].src = src;
}

preloadImg('http://yoururl/to/the/picture.jpg');

    oder Nativen Javascript -

    function preloadImg(src) {
    var img = new Image();
    img.src = src;
}

preloadImg('http://yoururl/to/the/picture.jpg');

    oder Mit CSS (kein JavaScript erforderlich)

    Können Sie auch Bilder Vorausladen mit CSS (und HTML)

    CSS:
    div#preload { display: none; }

    HTML: 

    <div id="preload">
   <img src="http://yoururl/to/the/picture1.jpg" width="1" height="1" alt="Image 1" />
   <img src="http://yoururl/to/the/picture2.jpg" width="1" height="1" alt="Image 2" />
   <img src="http://yoururl/to/the/picture3.jpg" width="1" height="1" alt="Image 3" />
</div>
    Also, ich würde ersetzen preloadImg('yoururl/to/the/picture.jpg'); mit der url für jedes Bild, das ich verwenden? Wie wäre das zu ändern, wie ich rufe .hover?
    Im Grunde ja. Könnten Sie bitte erklären, was Sie genau versuchen zu tun?
    Vielen Dank für immer zu mir zurück. Wie Sie oben sehen, ich habe eine html-Tabelle. In einem <td> ich habe ein kleines img-eines-player. Die übrigen Zellen haben Informationen auf diesen Spieler. Auf-img-hover einen anderen größeren img des Spielers wird auf der rechten Seite. Ich habe das Teil herausbekommen. So die nächste Sache, die ich bin versucht, mir beibringen, wie Vorspannung und diese imgs. Ich habe gesehen, verschiedene Arten von Vergleichsseiten imgs, aber ein wenig verloren mit der Art, wie ich 2 verschiedene imgs für jeden Spieler, einen, der nicht angezeigt wird, bis die hover - (46 img-Gesamt), und ruft Sie auf schweben. Ich hoffe, das hilft klären, was ich versuche, herauszufinden.
    Sie können die Vorspannung allen größeren Bildern durch Iteration über Sie und ruft preloadImg für jeden. Dann in den browser-caches diesen Bildern. Wenn ein Benutzer mit der Maus über das kleine Bild, dann haben Sie nur zum erstellen eines image-Tags (src=großes Bild-url) und fügen Sie es in die Zelle. Alternativ können Sie fügen Sie alle Bilder in die entsprechende Zelle und blenden Sie Sie mithilfe von css (oder js). dann schweben Sie müssen nur die Sichtbarkeit. Das ist so, wie ich es tun würde.
    Soweit ich sagen kann, das funktioniert überall, AUßER Safari (Version 7.0.1 (9537.73.11), Mac OS X 10.9.1). Irgendwelche Ideen? Kann das jemand bestätigen?

    InformationsquelleAutor sjkm

  2. 1

    Den einfachsten Weg zum laden, ein Bild wäre so etwas wie dieses:

    function preload(selector, url) {
    $('<img/>').attr({
        src: url,
        height: '1px',
        width: '1px'
    }).appendTo($(selector)).delay(1000).remove();
}

    InformationsquelleAutor Mike Thomsen

  3. 0

    Habe ich es wie folgt.

    Schaute ich alle hover-Zustand Bilder dann vorinstalliert die hover-Zustand durch ersetzen des -nm - (normal)- hv (hover)

    Das schöne daran, es so ist, dass es keine harte Codierung von URLs

    $(function() {
        $(this).find("img[src*='-nm']").each(function () {
           $('<img/>')[0].src = this.src.replace(/-nm/, "-hv");
        });
})

    InformationsquelleAutor RodgeDodge

Schreibe einen Kommentar