Wird Bild von einem Inline-Hintergrundbildstil geladen, wenn das Element ausgeblendet ist?

Question

Ich habe Hintergrundbilder, die als Inhalt über meine CMS und als solche hochgeladen werden müssen gerendert inline sein:

<div class="image" style="background-image: user-upload.jpg"></div> 

Ich brauche nicht diese Bild bei kleineren Bildschirmbreiten zu zeigen. Wie kann ich sicherstellen, dass das Bild nicht unnötig geladen wird, um die Seitengröße zu verringern?

Dies scheint eine gute Ressource zu sein, aber es doenst Deal mit Inline-Styles:

https://timkadlec.com/2012/04/media-query-asset-downloading-results/

@media (max-width: 600px { 
    .image { 
     display: none; 
    } 

    .image { 
     background-image: none; 
    } 
} 

Answer 1

Im Idealfall würden Sie die Hintergrund-Bild Erklärung haben keine Inline-Stil - nicht sicher, ob in Ihrer Anwendung Falls das möglich ist.

Aber wenn Sie es herausbekommen könnten, könnten Sie Ihre .image Klasse mit CSS belassen und dann jQuery verwenden, um eine zusätzliche Klasse hinzuzufügen oder zu entfernen, die nur das Hintergrundbild des div steuern würde.

var width = $(window).width(); 
if (width <= 300 or whatever width you want) {       
    $(".image").removeClass('yourclassforaBGimg');   
} 
else { 
    $(".image").addClass('yourclassforaBGimg'); 
} 

Wenn dies in der Kopfzeile der Seite dann die Klasse, die das Bild läuft von der Seite vollständig entfernt wurden, bevor der Browser Rendering beginnt, und es wird nicht geladen werden.