mit CSS das Laden von Bildern verhindern?

[Linuchs]

Moin,

ich habe eine PHP Zufalls Routine geschrieben, die einige Werte liefert wie Hintergrundbild, Audiodatei usw.

Nun gibt es Seiten, wo das Hintergrundbild stört. Die anderen Werte hätte ich aber gerne. Mit display:none kann ich es ausblenden, aber wie kann ich das Laden verhindern, das könnten unnötige 400 KB sein.

Die Zufalls-Routine weiss nicht, für welche Seite sie arbeitet.

Linuchs

[Mistfinder]

Linuchs: Du weißt doch sehr genau, dass wir weitere Angaben brauchen...

[Linuchs]

Linuchs: Du weißt doch sehr genau, dass wir weitere Angaben brauchen...

Jede Webseite holt sich von der Zufalls-Routine sowas:

<!-- Zufalls-Hintergrund und Hoerprobe -->
<img src="fotos/sc_ellunder_nordlichter.jpg" style="position:fixed; left:0; width:100%; top:0; height:100%; z-index:-1; opacity:.4" /><p class=co><a href="http://www.ellunder-nordlichter.de/">Shantychor "Ellunder Nordlichter" e.V.</a>: &nbsp; Hoch im Norden <audio controls preload="none"><source src="http://www.ellunder-nordlichter-musikbox.de/musikbox/images/Musik/HochimNorden.mp3
"type="audio/mpeg"></audio></p>

Natürlich kann ich dem Bild eine id oder class geben, um es anzusprechen, aber sowas

.bg_img {
  display: none;
}

würde ja das Laden nicht verhindern. Das audio kann preload="none". Sowas suche ich für img.

[MudGuard]

Hi,

Jede Webseite holt sich von der Zufalls-Routine sowas:

dann verpaß der Routine Parameter, die festlegen, was alles geliefert werden soll.

Und ruf die Routine mit passenden Parametern auf - auf Seiten, auf denen kein Bild erscheinen soll, also mit Paramter bild mit Wert false, auf Seiten, auf denen ein Bild erscheinen soll, mit Parameter bild = true.

Dann stellt sich die Frage gar nicht, ob und wie per CSS das Laden verhindert werden kann.

cu,
Andreas a/k/a MudGuard

[Linuchs]

dann verpaß der Routine Parameter, die festlegen, was alles geliefert werden soll.

Nee, das ist Mogelei und beantwortet nicht die Frage, ob / wie ich mit CSS das Laden beeinflussen kann.

Das nächste Problem zum Thema wartet nämlich schon: Ich habe eine Liste mit ca. 150 Vereinen und möchte beim Übermausen deren Logo anzeigen.

Wäre aber Blödsinn, vorsichtshalber 150 Logos zu laden.

Klar kann ich das mit Javascript lösen, aber wieviel einfacher wäre es doch, dem Bild eine Eigenschaft preload:none zu geben.

Da war doch früher mal was mit Vor-Ladung in geringerer Qualität. Gibt's das noch, kann man damit was machen? Z.B. alle Bilder mit derselben Vor-Ladung ... und erst bei Bedarf das Logo holen.

Linuchs

[Der Martin]

Hallo,

Das nächste Problem zum Thema wartet nämlich schon: Ich habe eine Liste mit ca. 150 Vereinen und möchte beim Übermausen deren Logo anzeigen.

Wäre aber Blödsinn, vorsichtshalber 150 Logos zu laden.

ich glaube, deine Sorge ist übertrieben, denn die Objekte, die erst beim :hover gebraucht werden (geänderte Hintergrundbilder, Pseudoelemente) werden AFAIK auch erst dann geladen, wenn sie gebraucht werden. Zumindest würde das die kurze Verzögerung beim ersten Hovern erklären, die in den meisten Browsern auftritt.

So long,
 Martin

[Matthias Apsel]

Hallo Linuchs,

Nee, das ist Mogelei und beantwortet nicht die Frage, ob / wie ich mit CSS das Laden beeinflussen kann.

Die kurze Antwort: Garnicht. CSS ist für die Gestaltung verantwortlich, der Inhalt steckt aber im HTML.

eine längere Vermutung:

#id {
    background: url(…);
}
@media … {
    #id {
        display: none;
    }
}

Ich könnte mir vorstellen, dass kluge Browser hier das Hintergrundbild u.U. nicht anfordern.

Bis demnächst
Matthias

[Matthias Apsel]

Hallo Matthias Apsel,

Ich könnte mir vorstellen, dass kluge Browser hier das Hintergrundbild u.U. nicht anfordern.

und wenn es statt display: none; background-image: none; heißt, könnte ich mir das noch besser vorstellen.

Nämlich, dass erst der letztendliche Wert für die Eigenschaft background-image ermittelt wird, bevor eine Anfrage losgetreten wird.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Linuchs

Nun gibt es Seiten, wo das Hintergrundbild stört. Die anderen Werte hätte ich aber gerne. Mit display:none kann ich es ausblenden, aber wie kann ich das Laden verhindern, das könnten unnötige 400 KB sein.

IIRC werden Hintergrundbilder von Nachfahrenelementen ausgeblendeter Elemente nicht geladen.

<div style="display: none; background-image: url(foo)"></div>

⬆︎ Bild wird geladen.

<div style="display: none">
  <div style="background-image: url(foo)"></div>
</div>

⬆︎ Bild wird nicht geladen.

Jake Archibald hatte das mal irgendwo so geschrieben, aber “No source to hand, sorry”

LLAP 🖖

PS: Die Inline-Styles dienen hier zur Verdeutlichung. Nicht nachmachen, Kinder.