Ich habe ein verstecktes Kontaktformular, das durch Klicken auf eine Schaltfläche bereitgestellt wird. Die Felder werden als CSS-Hintergrundbilder festgelegt und erscheinen immer etwas später als das umgeschaltete div.
Ich habe dieses Snippet in der <head>
Sektion verwendet, aber ohne Glück (nachdem ich den Cache geleert habe):
<script>
$(document).ready(function() {
pic = new Image();
pic2 = new Image();
pic3 = new Image();
pic.src="<?php bloginfo('template_directory'); ?>/images/inputs/input1.png";
pic2.src="<?php bloginfo('template_directory'); ?>/images/inputs/input2.png";
pic3.src="<?php bloginfo('template_directory'); ?>/images/inputs/input3.png";
});
</script>
Ich verwende jQuery als meine Bibliothek, und es wäre cool, wenn ich es auch zum Arrangieren dieses Problems verwenden könnte.
Vielen Dank für Ihre Gedanken.
Antworten:
Vorladen von Bildern nur mit CSS
Im folgenden Code wähle ich das
body
Element zufällig aus , da es eines der wenigen Elemente ist, die garantiert auf der Seite vorhanden sind.Damit der "Trick" funktioniert, verwenden wir die
content
Eigenschaft, mit der bequem mehrere URLs geladen werden können. Wie gezeigt,::after
bleibt das Pseudoelement jedoch verborgen, damit die Bilder nicht gerendert werden:Demo
Es ist besser, ein Sprite-Image zu verwenden, um http-Anforderungen zu reduzieren ... (wenn es viele relativ kleine Images gibt) und sicherzustellen, dass die Images dort gehostet werden, wo HTTP2 verwendet wird.
quelle
body
, da diese Bilder auf jede Seite geladen werden, die auf das Stylesheet verweist. Verwenden Sie stattdessen.contact_form:after {...}
eine andere Klasse, die weniger global ist. Es sei denn natürlich, Ihr Kontaktformular befindet sich auf jeder Seite;)Ich kann bestätigen, dass mein ursprünglicher Code zu funktionieren scheint. Ich hielt mich beiläufig an ein Bild mit einem falschen Weg.
Hier ist ein Test: http://paragraphe.org/slidetoggletest/test.html
quelle
Vorladen von Bildern mit dem HTML <link> -Tag
Ich glaube, die meisten Besucher dieser Frage suchen nach der Antwort "Wie kann ich ein Bild vorab laden, bevor das Rendern der Seite beginnt?" Die beste Lösung für dieses Problem ist die Verwendung von
<link>
Tags, da<link>
Tag das weitere Rendern der Seite blockieren kann. Siehe präventivDiese beiden Wertoptionen des Attributs
rel
( Beziehung zwischen dem aktuellen Dokument und dem verknüpften Dokument ) sind für das Problem am relevantesten:Wenn Sie also eine Ressource laden möchten ( in diesem Fall ein Bild ), bevor der Rendervorgang des
<body>
Tags beginnt, verwenden Sie:Wenn Sie eine Ressource während des
<body>
Renderns laden möchten, diese aber später dynamisch verwenden möchten und den Benutzer nicht mit der Ladezeit belästigen möchten , verwenden Sie:quelle
prefetch
wenn der Browser inaktiv ist, was von dernsIWebProgressListener
API festgelegt wird. Sehen Sie diese für weitere Informationen.<link rel="preload">
ist nicht Rendering - Block, glaube ich , der Autor die Definition falsch verstanden. Aus MDN Vorladen von Inhalten mit rel = "Preload" , "... die Sie früh im Seitenlebenszyklus laden möchten, bevor die Haupt-Rendering-Maschinerie des Browsers aktiviert wird ." Die Idee ist, dass Ressourcen so schnell wie möglich abgerufen werden, wodurch es wahrscheinlicher wird, dass die Ressource bei Bedarf verfügbar ist, beispielsweise wenn ein<img>
Element gerendert wird.http://css-tricks.com/snippets/css/css-only-image-preloading/
Technik # 1
Laden Sie das Bild in den regulären Zustand des Elements und verschieben Sie es nur mit der Hintergrundposition. Verschieben Sie dann die Hintergrundposition, um sie beim Hover anzuzeigen.
Technik Nr. 2
Wenn auf das betreffende Element bereits ein Hintergrundbild angewendet wurde und Sie dieses Bild ändern müssen, funktioniert das oben Gesagte nicht. Normalerweise wählen Sie hier ein Sprite (ein kombiniertes Hintergrundbild) und verschieben einfach die Hintergrundposition. Aber wenn das nicht möglich ist, versuchen Sie es. Wenden Sie das Hintergrundbild auf ein anderes Seitenelement an, das bereits verwendet wird, aber kein Hintergrundbild hat.
quelle
versuche es damit:
Mit diesem Code laden Sie das Hintergrundbild vor und rendern das Formular beim Laden
quelle
Zum Vorladen von mit CSS festgelegten Hintergrundbildern war die effizienteste Antwort eine modifizierte Version eines Codes, den ich gefunden habe und der nicht funktionierte:
Der enorme Vorteil davon ist, dass Sie es nicht aktualisieren müssen, wenn Sie in Zukunft neue Hintergrundbilder einfügen. Es wird die neuen finden und sie vorladen!
quelle
Wenn Sie diese Hintergrundbilder an einer anderen Stelle auf Ihrer Site für Formulareingaben wiederverwenden, möchten Sie wahrscheinlich ein Bildsprite verwenden. Auf diese Weise können Sie Ihre Bilder zentral verwalten (anstatt Bild1, Bild2, Bild3 usw. zu haben).
Sprites sind für den Client im Allgemeinen schneller, da sie nur eine (wenn auch etwas größere) Datei vom Server anfordern, anstatt mehrere Dateien. Weitere Vorteile finden Sie im SO-Artikel:
CSS-Bild-Sprites
Andererseits ist dies möglicherweise überhaupt nicht hilfreich, wenn Sie diese nur für ein Formular verwenden und sie wirklich nur laden möchten, wenn der Benutzer das Kontaktformular anfordert. Dies ist jedoch möglicherweise sinnvoll.
http://www.alistapart.com/articles/sprites
quelle
Wie wäre es, wenn Sie das Hintergrundbild an einem versteckten Ort laden? Auf diese Weise wird es beim Öffnen der Seite geladen und benötigt keine Zeit, sobald das Formular mit Ajax erstellt wurde:
quelle
Sie können dieses jQuery-Plugin waitForImage verwenden oder Ihre Bilder in ein verstecktes div oder (Breite: 0 und Höhe: 0) einfügen und das Onload-Ereignis für Bilder verwenden.
Wenn Sie nur 2-3 Bilder haben, können Sie Ereignisse binden und in einer Kette auslösen, sodass Sie nach jedem Bild Code ausführen können.
quelle
Die einzige Möglichkeit besteht darin, das Image in Base64 zu codieren und im HTML-Code zu platzieren, sodass es nicht den Server kontaktieren muss, um das Image herunterzuladen.
Dadurch wird ein Bild aus der URL codiert, sodass Sie den Code der Bilddatei kopieren und wie folgt in Ihre Seite einfügen können ...
quelle
Wenn es keine Möglichkeit gibt, CSS-Code zu ändern und Bilder mit CSS-Regeln für
:before
oder:after
Pseudoelementen vorzuladen, kann ein anderer Ansatz mit JavaScript-Code verwendet werden, der CSS-Regeln geladener Stylesheets durchläuft. Damit es funktioniert, sollten Skripte nach Stylesheets in HTML eingefügt werden, z. B. vor dem Schließen vonbody
Tags oder direkt nach Stylesheets.quelle
Befinden sich die Seitenelemente und ihre Hintergrundbilder bereits im DOM (dh Sie erstellen / ändern sie nicht dynamisch), werden ihre Hintergrundbilder bereits geladen. An diesem Punkt möchten Sie vielleicht die Komprimierungsmethoden betrachten :)
quelle