web workers

[xcyberpunk]

Hallo zusammen, ich befinde mich derzeit im Studium zu Webentwickler und habe da mal eine Frage:

Ich möchte über web-worker hintergrundbilder vorladen. Ausgangssituation ich baue mir eine website auf eine filename.html, darin tausche ich die einzelnen Bereiche einfach nur über jquery aus.

Nun möchte ich (rein hypotetisch) bei unterschiedlichen main bereichen die background-img austauschen.
Da diese leider immer etwas ladezeit benötigen.

In meinen Büchern habe ich eine Bsp. zu einem Web-worker entdeckt.

main.js :

var ww = null;
$(function(){
    $("#b1,#b2").resizable();
    $("button:first").click(function() {
        $("#a1").html("Start Web Worker");
        ww = new Worker("lib/js/worker/bgwork.js");
        ww.onmessage = function(ev) {
            $("#a1").html(ev.data);
        }
    });

    $("button:eq(1)").click(function() {
        if(ww!=null) ww.terminate();
        $("#a1").html("Ende Web Worker");
    });

    $("button:eq(2)").click(function() {
        $("#a2").html("Zufallszahl: "+Math.random());
    });
});

webworker.js:

var i = 0;

var zufall = 0;

while (true) {
    i++;
    zufall = Math.random();

    if(i%1000==0) postMessage("Schritt "+ i + ", Wert der Zufallszahl: " + zufall);

    if(i%10000000) {

        break;
    }
}

Was dieser Code jetzt im einzelnen macht ist irrelewand nur das hier ein Webworker erstellt wird und mit Ihm kommuniziert wird, damit man sieht das die Website trotzdem funktioniert kann ich die div bereiche in der Größe ändern und Zufallszahlen generieren.

Nun zu meinem Problem, ich würde gerne die Website erzeugen und ihm dann sagen, lade dir bitte die Hintergrund-img in den Arbeitsspeicher, so das wenn der User auf die nächste Seite geht, das Bild sofort da ist.

Leider bin ich noch nicht so weit das ich so mit dem arbeitsspeicher kommunizieren kann.
Hätte so etwas überhaupt sinn ? Und wenn ja, wie könnte ich sowas realisieren ???

kleiner nachtrag:
in dem bsp. wird jquery und ui-jquery verwwendet, deswegen resizable(); usw.

 

[Dormilich]

Nun zu meinem Problem, ich würde gerne die Website erzeugen und ihm dann sagen, lade dir bitte die Hintergrund-img in den Arbeitsspeicher, so das wenn der User auf die nächste Seite geht, das Bild sofort da ist.

für sowas ist der Browser-Cache zuständig. und mit JS hast du auch keinen direkten Zugriff auf den Arbeitsspeicher (ansonsten gäbe es Memory-Leaks/Errors zuhauf). deswegen hilft dir hierbei ein WebWorker auch überhaupt nicht, weil da eine komplett andere Intention dahintersteckt.

was helfen kann ist einfach das Bild in ein Image-Objekt laden, sodaß es in den Cache kommt.

 

[xcyberpunk]

hey das ist ja auch eine klasse Idee, bin ich gar nicht drauf gekommen, thx !!!

- - - Aktualisiert - - -

Du meintest das in etwa so ja :

function wechsel () {
   $("body").css({"background-image": this.url,"background-size":"100%"});

};
var bg = [{url:"url(./images/bg.jpg)", start: wechsel},{url:"url(./images/cg.jpeg)", start: wechsel}];

 

[Dormilich]

ich preloade normalerweise keine Bilder, aber wenn‘s funktioniert isses OK.

 

[xorg1990]

für sowas ist der Browser-Cache zuständig. und mit JS hast du auch keinen direkten Zugriff auf den Arbeitsspeicher (ansonsten gäbe es Memory-Leaks/Errors zuhauf). deswegen hilft dir hierbei ein WebWorker auch überhaupt nicht, weil da eine komplett andere Intention dahintersteckt.

Und wenn man die Bilder in den Session oder Local Store packt?

 

[xcyberpunk]

Das Zitat ist nicht von mir, das hat Dormilich geschrieben.

Ich finde dieses Forum genial, ich habe das Problem das meine Profs ganz anders Programmieren (wegen des Lerneffekts). Hier sitzen Leute die wirklich schreiben, das hier ist ganz anders als ich es im Studium kennen lerne.

 

[xorg1990]

Das Zitat ist nicht von mir, das hat Dormilich geschrieben.

Ups, Passiert.

 

[Dormilich]

Und wenn man die Bilder in den Session oder Local Store packt?

dir ist bewußt, daß WebStorage nicht unbegrenzt Speicherplatz hat? und m.W.n. speichern WebStorage auch keine Binärdaten. Und den Cache umgehst du damit auch, denn dann mußt du die Bilder mit JS erstellen.

 

[xorg1990]

dir ist bewußt, daß WebStorage nicht unbegrenzt Speicherplatz hat?

Schon klar aber es handelt sich ja nur um ein Hintergrundbild. Man müsste halt die Logik eines DSG-Getriebes nachbauen. Sprich wenn man im ersten Gang anfährt ist der 2te schon drinnen schalte ich in den 2ten wird der erste "gelöscht" und der dritte eingelegt usw.
*Bildlich gesprochen.

In FF stehen einen 5MB LocalStore zu, Ein 15,9 Megapixel Bild wäre ca ~5MB groß so ein großes Bild habe ich noch nirgendwo gesehen im Internet. PNG Datein sind ein wenig größer als jpg Dateien.

und m.W.n. speichern WebStorage auch keine Binärdaten.

Ah ok, das wusste ich nicht. Müsste man halt einen Umweg über base64 nehmen ist aber auch Quatsch.

Und den Cache umgehst du damit auch,

Das kaufe ich dir so nicht ab.
Denn laut wikipedia

Daten, die lokal gespeichert werden, sog. Local Shared Objects (LSO), sind mit einer Domain und dem lokalen Benutzerprofil des Zugriffsrechners verknüpft und bleiben auch nach Beenden des Browsers bestehen. Alle Skripte einer Domain, von der aus die Daten gespeichert wurden, können auf die benutzerprofilspezifischen Daten zugreifen.

Bei Mozilla Firefox werden die Daten in der Datenbankdatei webappsstore.sqlite gespeichert.

https://de.wikipedia.org/wiki/Web_Storage

Also sind die Daten ja doch irgendwo gespeichert.

Dan gibt es noch indexedDB:
https://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/

 

[Dormilich]

Ich hab ja auch nie behauptet, daß die Daten nicht gespeichert würden, ich sage nur, daß Bilder, die im WebStorage sind, nicht im Browser-Cache liegen, wo man normalerweise Bilder zwischenspeichert.