Wie kann ich Bilder für die schnelle Anzeige mit Javascript im Cache zwischenspeichern?

Question

Ich habe eine Webseite, auf der der Benutzer ein neues Bild sehen soll, wenn er seine Maus über einen bestimmten Teil des Bildes legt. Ich habe eine Imagemap benutzt.

<img src="pic.jpg" usemap="#picmap" /> 
<map id="picmap" name="picmap"><area shape="rect" coords ="10,20,30,40" 
onMouseOver="mouse_on_write('mouse is on spot')" 
onMouseOut="mouse_off('mouse is off spot')" 
href="http://www....html" target="_blank" /> 
</map> 
<p id="desc"></p> 

Wo im Header ich diese Funktionen definiert:

<script type="text/javascript"> 
function mouse_off(txt) 
    { 
    document.getElementById("desc").innerHTML=txt; 
    document.p1.src="pic.jpg"; 
    } 
function mouse_on_write(txt) 
    { 
    document.getElementById("desc").innerHTML=txt; 
    document.p1.src="pic2.jpg"; 
    </script> 

Es funktioniert, aber es ist langsam. Wenn die Maus über das zweite Bild gelegt wird, dauert es einige Sekunden, bis sie erscheint. Meine vorläufige Lösung bestand darin, die Größe der Bilder drastisch zu reduzieren, weil sie riesig waren (bei 2,5 MB schalten sie jetzt schnell um, sind aber immer noch nicht nahtlos). Wie kann ich den Bildwechsel nahtloser ohne Reduzierung der Bildqualität machen? Auf den zweiten Gedanken erkenne ich, dass ich auch nur beide Bilder in einem kleinen und einem großen Maßstab angezeigt hätte, und auf Maus über sie würden Plätze wechseln; Wie würde ich das tun? Würde dies die Verzögerung reduzieren?

Answer 1

Sie brauchen keine Seitenelemente zu erstellen, können sie alle mit JavaScript vorbelastet werden:

tempImg = new Image() 
tempImg.src="pic2.jpg" 

EDIT:

Wenn Sie viele Bilder haben, können Sie der Multi-Preloader des Armen-Mannes:

preloads = "red.gif,green.gif,blue.gif".split(",") 
var tempImg = [] 

for(var x=0;x<preloads.length;x++) { 
    tempImg[x] = new Image() 
    tempImg[x].src = preloads[x] 
} 

Answer 2

Was Sie wollen todo ist die Bilder hinter den Kulissen laden.

Dann, wenn die Maus über, der Browser wird bereits dieses Bild in seinem Cache und wird es sehr schnell wechseln.

function preloadImage(imagePath) 
{ 
    var img = document.createElement('IMG'); 
    img.src = imagePath;   
} 

preloadImage('BigImage'); 

Answer 3

Sie können beide Bilder auch in dieselbe Datei setzen und sie oben und unten versetzen. Wenn es sich auf das Element auswirken sollte, das Sie mit der Maus überqueren, könnte es wie folgt aussehen:

a { 
    background-image: url(back.png); 
    background-repeat: no-repeat; 
    background-attachment:fixed; 
    background-position: 0 0; 
} 

a:hover { 
    background-image: url(back.png); 
    background-repeat: no-repeat; 
    background-attachment:fixed; 
    background-position: 0 20px; 
} 

So kann es ohne Javascript funktionieren.

Wenn ich deinen Fall richtig verstehe, benötigst du noch Javascript, aber du kannst Bild auf diese Weise dennoch "vorladen".

Answer 4

Dies mit Sprites zu tun ist eine gute Lösung, weil Sie nicht warten müssen, um das neue Bild zu laden. Sprites arbeiten, indem sie die zwei Bilder zu einem kombinieren und den Hintergrund-Offset bei Mouseover ändern.

Sie können sogar mit CSS statt, für viel schnellere Ergebnisse. Es gibt ein gutes Tutorial zu diesem here.

Answer 5

Verwenden Sie display: none;, dann lassen Sie das Javascript in display: inline ändern, wenn Sie es anzeigen möchten. Dies hat den zusätzlichen Vorteil, dass Sie das Bild genau in der Quelle der Seite platzieren können, anstatt es später mit Javascript hinzuzufügen.

Answer 6

Clevere Lösung von Diodeus. Wenn es jedoch keinen guten Grund gibt, NICHT zu, sollten Sie wirklich Sprites in Betracht ziehen. Es ist ein bisschen Arbeit, sie einzurichten, aber die Nettowirksamkeit ist es wirklich wert.

Dieser Ansatz ist die Nummer eins Regel in Steve Souers High Performance Web Sites.

"Regel 1 - Weniger HTTP-Requests"

Viel Glück und Spaß haben. - D.

Answer 7

Hier ist, wie ich es tun, in reinem JavaScript:

var myImgs = ['path/to/img1.jpg', 'path/to/img2.gif']; 

function preload(imgs) { 
    var img; 
    for (var i = 0, len = imgs.length; i < len; ++i) { 
     img = new Image(); 
     img.src = imgs[i]; 
    } 
} 

preload(myImgs); 

Das heißt, ALassek Vorschlag CSS-Sprites verwenden ist ausgezeichnet, wenn Sie Spielraum haben, es zu tun. Die Vorteile von Sprites sind vielfältig: weniger HTTP-Anfragen, kleinere Download-Größe (normalerweise), funktioniert ohne JavaScript aktiviert.

Answer 8

Ich habe bemerkt, dass ‚Vorbelastung‘ in .src bis heute nicht konsequent in allen Browsern funktioniert - IE7 noch kann nicht herausfinden, wie/vorinstallierten Bilder verwenden cachen - man kann deutlich sehen, gibt es eine Server-Anfrage bei jedem Mausklick.

Was ich mache, ist in alle Bilder über Standard-HTML-Platzierung laden und einfach style.display ein- und ausschalten.

Answer 9

http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/

Als wir das Labor ins Leben gerufen, veröffentlichten wir ein jQuery-Plugin, das alle Bilder in CSS-Dateien referenziert automatisch vorbelastet. Wir haben festgestellt, dass das Skript unglaublich hilfreich bei der Entwicklung schneller Anwendungen ist, bei denen Bilder immer dann bereitstehen, wenn wir sie brauchen. Dieser Beitrag beschreibt eine wichtige Aktualisierung des Skripts, die die Integration in bestehende Projekte noch einfacher macht.

Answer 10

Ab Javascript 1.6 kann dies ohne benannten Variablen erreicht werden:

imageList.forEach(function(path) { new Image().src=path });