Hintergrundbild load schnell onload ohne weißen Hintergrund

Question

Ich muss Hintergrundbild beim Laden der Seite ändern, da ich onload on body verwende, oder ich muss window.onload verwenden, die schneller Hintergrundbild laden würde, ohne weißen Hintergrund als Seite anzuzeigen Belastung. und wo ich sie setzen auf den Kopf oder Körper nach dem Tag so kann es zeigt als Website öffnet, ohne weißen Hintergrund

$('body').onload('background-image', 'url(http://picture.de/image.png)'); 

Answer 1

Beachten Sie, dass einmal ein Bild im Browser geladen ist, wird es in der sein Browser-Cache und lädt viel schneller das nächste Mal, wenn es verwendet wird, solange das Bild nicht aus dem Browser-Cache abgelaufen ist.

Für Ihr Problem gibt es zwei Dinge, die Sie versuchen.

1) Versuchen Sie Bilder mit Javascript vorzuladen:

function preloadImage(url) { 
    var img=new Image(); 
    img.src=url; 
} 

2) Ihre Bilder optimieren. Verwenden Sie ein Werkzeug wie tinypng, um Ihre Bilder zu komprimieren. Meistens sparen Sie bis zu 60%. Wenn Sie einen Container haben, in den das Bild passen soll, versuchen Sie, die Größe der Bilder in Breite und Höhe des Containers zu ändern (verwenden Sie Breite und Höhe).

Answer 2

Können Sie bitte das folgende Beispiel überprüfen. http://jsbin.com/pozadujeca/edit?js,console,output und mit CSS können Sie die Hintergrundfarbe auf das Bild laden oder Lader im Hintergrund anzeigen.

Ich hoffe, es wird Ihnen helfen Danke

Answer 3

Ich würde die js Route nicht nehmen, stattdessen würde ich nur das Bild als progressive jpg speichern: https://optimus.io/support/progressive-jpeg/

Answer 4

Zuerst kann man den Fluss des verstehen js engine .wie es funktioniert. Sie können in den Kopf setzen, wenn Sie es laden möchten, wenn js geladen wird. Wenn Sie Hintergrundbild anzeigen möchten, dann müssen Sie in HTML .because HTML geladen vor js in Browser