warten Sie, bis die Bilder im Hintergrund (CSS) geladen sind

Nehmen wir an, wir haben eine Diashow mit Bildern. Die Miniaturansichten dieser Bilder werden in Div Wrapper mit einem Schieberegler (den ich mit JQuery erstellt habe) angezeigt und jedes Bild ist in einem @ enthalte<li> mit einem CSS-Hintergrund, der natürlich das Bild darstellt. Ich entschied mich für die Verwendung eines Hintergrundbilds für ein Layout, da sich alle in Größe und Seitenverhältnis unterscheiden.

Die Bilder stammen aus einer Datenbank und werden dynamisch erstellt.

Was ich machen möchte ist:

Über jedes @ eine "Lade" -Nachricht anzeig<li> und warte bis der Hintergrund (Bild) in den Cache geladen ist und zeige ihn dann mit einem FadeIn. Die einzige Möglichkeit, an die ich denken kann (nicht die, die ich kann, da ich nicht ganz sicher bin, wie und ob es machbar ist) ist:

temporally den Hintergrund für jedes<li> während die Meldung "Laden" angezeigt wirdrstellen Sie eine Schleife für jeden Hintergrund, um die Bild-URL zu erhalteVerwenden Sie die Funktion $ .get, um sie zu laden, und machen Sie dann nach dem Laden alles, was ich will.

Abgesehen von der Machbarkeit würde dies bedeuten, dass sie nacheinander geladen werden. Wenn also jemand aus irgendeinem Grund nicht lädt, wird das Skript niemals fortgesetzt!

Ich habe einige Websites gesehen, die JS zum Laden von Bildern nur dann verwenden, wenn es vom Browser angezeigt wird. Vielleicht ist dies derselbe Fall, den ich suche, da ich einen Scroller verwende und nur ein Teil der Bilder angezeigt wird sofort und wenn die Seite lädt

Antworten auf die Frage(10)

Ihre Antwort auf die Frage