Vorspannung hintergrund Bild
Es gibt Tonnen von Artikeln, wie zum laden eines Bildes, aber ich kann nicht scheinen, um alles nützliche über das Vorabladen ein Hintergrundbild mit jquery.
Habe ich ein einfaches html-mockup, was möchte ich erreichen:
http://jsfiddle.net/3rfhr/
- Eine be-div erscheint
- Hintergrund geladen wird
- Laden div verschwindet
- Hintergrund-DIV erscheinen
Kann ich mit der div-übergänge, aber ich bin ratlos, wie ich sollte gehen über das Vorabladen ein css-hintergrund. Vielen Dank für das Lesen meiner Frage 🙂
Du musst angemeldet sein, um einen Kommentar abzugeben.
Können Sie nicht, solange es einen hintergrund. Laden Sie Sie normal ein und legen Sie dann die hintergrund-Bild. So etwas wie dieses:
die Letzte Zeile ist notwendig, in einigen browser-falls das Bild zwischengespeichert wird.
src
Teil ist repaced durch die url des Bildes?src
ist die Bild-url, setze Sie auf, was Sie brauchen. Chris Kempen die Antwort ist eine gute Idee, dass er packte den src aus dem CSS, aber ich bin mir nicht sicher, was die 2. Zeile ist fürmissing ) after argument list
url( ... )
, das habe ich übersehen.$.fn.preloadImage = function(){ return this.each( function(){ ........ } ); }
und ersetzen Sie die load-Funktion mit so etwas wie$self.trigger( 'loaded' )
-- Hinweis: Sie sollten auch verhindern, dass Doppel-Aufruf der Funktion in diesem Fall (die Letzte Zeile wird manchmal auch Doppel-Aufruf der callback, aber es war nicht wichtig in diesem Fall, so habe ich es ignoriert)Tun, Vorladen, warum nicht schnappen Sie sich die URL aus der
css
- Attribut mit jQuery? So etwas wie dieses:url( ... )
)url( ... )
aus dem css-Attribut. Ja, könnte definitiv regex, und soweit ich weiß, jQuery, sollten immer geben Ihnen einen schönen string Wert 😉div
eine bestimmtewidth
undheight
im CSS, wie500px
für Breite und Höhe, und das sollte den trick tun 🙂Hier ein Beitrag aus der letzten Woche, das Vorausladen von Bildern mit jQuery: HTML-5-Datei laden Bild als hintergrund-Bild
Und hier ist die Lösung, post verwiesen: http://sveinbjorn.org/dataurls_css
Du Logik ist fast gut, aber Sie können nicht fangen-events für CSS in jquery.
Müssen Sie laden das Hintergrundbild für einige
<img>
element. Fangen Sie das event-laden des Elements, und wenn es ausgelöst wird, ändern Sie den hintergrund Bild, um das src und den rest deiner Logik.Vorausladen von Bildern mit CSS und JavaScript, hoffe, dass diese zwei link könnte einfach und hilfreich.
http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/
http://perishablepress.com/press/2006/11/14/preloading-images-with-css-and-javascript/
Ein funktionierendes Beispiel mit einem mock
setTimeout
zu simulieren Ladezeit.Den entsprechenden jQuery code ist:
setTimeout
sollte nicht verwendet werden, für diese...setTimeout
ist nur da, um zu simulieren, die Ladezeit und für keinen anderen Grund.