HTML Background Image laden ohne Lags

[DreamGamer]

Hallo, ich bin aktuell dabei meine Webseite bessere Performance zu verpassen. Und man kann sich das so vorstellen meine Webseite besteht oben aus einem FULL-HD Bild das im Hintergrund ist und im Vordergrund sind Partikel von particles.js und darauf ist dann der Haupt Container. Es ist aktuell so dass die Seite einmal lädt und danach erst das Bild reingeladen wird, dadurch endstehen erstmals lags und wenn es dann geladen ist und angezeigt wird, lagt es also man hat so für fast 1 Sekunde Standbild. Die Lags haben mich gestört deshalb habe ich überlegt und n bisschen gegoogelt und daraufhin dieses kleine aber feine Skript gefunden:

function loadBackgroundImage() {
  var imageURL1 = "/img/particles/image.jpg";
  var image1 = new Image();
  image1.onload = function(){
      $(".particles-container").css("background-image", "url('" + imageURL1 + "')");  
  }
  image1.src = imageURL1;
}

Angeblich lädt es das Bild im Hintergrund und sobald es fertig geladen ist wird es angezeigt. Scheint auch ganz ok zu funktionieren (glaube ich) denn die lags nach dem Seiten laden direkt sind weg bzw. weniger aber ich habe immer noch das Standbild wenn das Bild reingeladen wird. Ich finde einfach kein Skript was den Background lädt und danach ohne Lags anzeigt. Ich habe auch ein relativ bekanntes Skript für "img" Tags das sieht wie folgt aus:

var my_image2 = new Image();
function loadImage() {
    document.getElementById('image').src = '/img/dom.jpg';
}

function preload() {
    my_image2.onload = loadImage;
    my_image2.src = '/img/dom.jpg';
}

$(document).ready(function(){
    preload();
});

Dieses Funktioniert einwandfrei aber ich kann leider bei particles.js kein img als Hintergrund einfügen, jedenfalls wüsste ich nicht wie das gehen sollte. Egal welche Oberfläche sobald nur etwas über oder unter der Ebene von particles.js liegt. Werden die Partikel nicht mehr angezeigt. Gibt es so ein Skript wie hier oben genannt auch für Background Images? Habe schon probiert das Bild als Background Image nach dem das Bild initialisiert wurde zu laden anstatt es wie oben als Image zu laden. Aber dann lädt es wieder lange und es kommt zu einem Standbild. Ich hoffe es war verständlich und sorry für die ganzen Rechtschreibfehler und andere Fehler in diesem Text mein Gehirn ist aktuell nicht ganz da das wäre aber ein anderes Thema deshalb einfach nicht wundern.


Freue mich auf Antworten

LG DreamGamer

 

[azereus]

schick mal pn mit domainnamen
oder post doch hier wie du willst

 

[DreamGamer]

@azereus Habe dir eine pn geschickt.

 

[azereus]

hast ne antwort
war schon im bett

problem war nicht der code selbst sonder die bildgröße von
/img/particles/image.jpg
das bild hat im original gute 11mb

sollte auf alle fälle web-optimiert werden auf einige 100KB maximal
mit irfanview 80% jpg -> kommts dann auf 2,6mb

 

[DreamGamer]

Stimmt danke schoneinmal dafür Aber die Webseite lagt immernoch kurz bei Laden also direkt wenn das Bild lädt warum das? Es lädt jetzt halt direkt wenn ich auf die Seite gehe. Und das Bild ist jetzt 400 KB groß.

 

[azereus]

lädt jetzt deutlich schneller ja

was meinst du jetzt noch für nen kurzen lag?
ich seh da nix
schaus mir grad übers büro an 100/100er leitung



browsercache etc geleert?
anderen browser verwendet?

die test-tools die ich dir geschickt hab verwendet um weitere optimierungen zu machen?
es war ja nicht nur das hauptbild betroffen
auch die anderen könn(t)en optimiert werden

 

[DreamGamer]

Ich habe einen kurzen Lag also wenn ich die Partikel bewege und das Bild reingeladen wird hängen die Partikel kurz das sind glaube ich zwar nur so 0,2 sek. aber es ist bei mir ein kurzer lag habe es in 3 Browser probiert.

 

[T0a5tbr0t]

Ohne die Seite zu sehen kann man nur raten... Du kannst versuchen die Seite mit Profiler / Laufzeitanalyse zu laden und gucken was genau der Browser in dem Moment macht. Chrome / FF / Edge bieten in ihren Entwicklertools alle solche Tools.

Ein 800kb Bild zu decodieren sollte auf einem Desktop PC nicht wirklich spürbar sein. Es gibt (soweit ich weiß) auch noch keine API um Bilder asynchron zu decodieren.
Es kann auch sein, dass ein Skript eine teure Layout-berechnung oder so auslöst.