Wie Bilder vorzuladen, so dass sie auf der Seite überall sonst schneller geladen sind, und es ist eine gute Praxis?

Question

Hier ist das Ding. Ich habe eine Google Map mit vielen Markierungen in ihm

Das Problem ist, dass die Karte geladen wird, bleibt ein wenig leer, während und nur dann Markierungen angezeigt werden. Der Marker ist maßgeschneiderte PNGs.

Meine Idee ist es, „Vorbelastung“ sie (nicht sicher, dann ist es das richtige Wort), so dass sie fast zur gleichen Zeit wie die Karte angezeigt werden.

Was ich tat, so weit ist, die gleichen Bilder, die ich auf meiner Karte, außerhalb der Karte, früher in der Seite in display:none;

verwenden, um hinzufügen

Ich bin sicher nicht, aber es scheint, als ob die Zeit zwischen der Karte und die Bilder werden angezeigt reduziert wurde.

Ist es der beste Weg, es zu tun, und es ist eine gute Praxis?

Answer 1

Sie könnten „Sprites“ heißt eine Sammlung von getrennten Bildern auf 1 Einzel png verwenden. Dies trägt den Vorteil, daß nur 1 Last d.h. weniger getrennte Lasten. Google GWT schiebt diese Technik eine Menge (das heißt Bild Bundles).

Der Wert dieser Technik steigt mit der Anzahl der diskreten Bilder, die Belastung erfordern. Den mehr getrennten Bilder, desto länger dauert es, sie zu laden

Answer 2

Verwenden Sie display:none nicht für Vorbelastung. Da ein Element zu display:none macht nicht jeder seine physikalischen Eigenschaften, wird der Browser das Herunterladen es nicht stört, bis es sichtbar gemacht hat.

Eine Alternative ist visibility:hidden zu verwenden, aber Sie laufen Gefahr zu laufen, in einem User-Agent, der ziemlich genau das Gleiche tut. visibility:hidden erfordert, dass der Browser das Box-Modell für das Bild berechnen, das das Bild benötigt wird geladen (auf die Abmessungen erhalten). Ich glaube nicht, das funktioniert in IE6, though.

Die letzte Technik (und mein Favorit) ist ein div direkt vor Ihrer </body> Tag zu erstellen. Positionieren Sie es absolut mit left: -99999999px; top: -99999999px. Der Browser ist gezwungen, um die Bilder zu machen (und sie folglich laden) und es gibt keine unordentlichen Javascript zu behandeln.

Nun, integrieren diese mit Ihrem Problem, setzen Sie den Code für Ihre Google-Karte nach Ihre "Vorspannung div". Ihr Browser wird gezwungen, die Bilder zu laden, bevor er den Code läuft die Karte zu erstellen. Dies sollte Ihr Problem lösen.

Hope, das hilft!

Answer 3

Von dem, was ich von den meisten modernen Browsern erinnert, werden die Bilder einmal immer geladen (angesichts der src des Bildes ist gleich). Ich denke, man ihnen Mittel eine Belastung, bevor die Last abbildet.

Meiner Meinung nach in wirklich nicht so viel Materie. Marker sollte relativ leicht seinen im Vergleich zu dem Kartenbild selbst und ich kann sie wirklich nicht sowieso ohne die Karte verwenden.

Wenn Sie denken, es verbessern Sie Benutzererfahrung dann denke ich, es ist eine gute Praxis ist, aber ich würde versuchen, sie auf eine sauberere Art und Weise zu bekommen, wahrscheinlich einen Ajax-Aufruf früh in der Seite zu laden?

Hier finden Sie aktuelle Ajax In Aktion: Preloading Bilder