Gibt es eine Möglichkeit, Inline-CSS-Hintergrundbilder nur nach dem Laden der Seite zu laden?

Question

Ich habe viele Bilder auf meiner Seite, die Last als Hintergrundbild eines div wie folgt aus:

<div style="background-image:url('http://www.example.com/someimg.jpg');"></div> 

Und für Seitenladegeschwindigkeit Zwecke ich will nach der Seite nur all diejenigen Bild zu laden, wie wurde voll geladen.

Jetzt ich konnte nur, dass so mit einigen jQuery Hintergrundbild hinzufügen:

$(window).bind("load", function() { 
    $('div').css('background-image', 'http://www.example.com/someimg.jpg')'); 
}); 

Aber ich viele Bilder haben und ich verwende auch einige dynamische PHP diese Bilder (die Benutzer zu laden regelmäßig aktualisieren), also brauche ich eine andere Lösung, die für jedes Hintergrundbild auf der Website funktioniert.

Irgendwelche Ideen?

Danke.

Answer 1

Sie können dies tun, indem Sie Ihre Bilder in ein Datenattribut anstatt in ein Inline-Attribut style laden. Verwenden Sie anschließend jQuery, um alle Elemente mit diesem Datenattribut zu durchlaufen und den Wert zum Füllen des Stils zu verwenden.

z.B. HTML:

<div data-bg="https://images.unsplash.com/photo-1463123081488-789f998ac9c4?format=auto&auto=compress&dpr=1&crop=entropy&fit=crop&w=1199&h=799&q=80">Element with bg</div> 
<div>Element without bg</div> 
<div data-bg="https://images.unsplash.com/photo-1462774603919-1d8087e62cad?format=auto&auto=compress&dpr=1&crop=entropy&fit=crop&w=1199&h=799&q=80">Element with bg</div> 

jQuery:

$(window).load(function(){ 
    $('[data-bg]').each(function(){ 
    $(this).css('background','url(' + $(this).data('bg') + ')'); 
    }); 
}); 

ich dies zu demonstrieren oben geklopft: http://codepen.io/anon/pen/jqgLja