CSS-Bilder vorab laden
Ich habe ein verstecktes Kontaktformular, das durch Klicken auf eine Schaltfläche bereitgestellt wird. Seine Felder sind als CSS-Hintergrundbilder festgelegt und erscheinen immer etwas später als das umgeschaltete div.
Ich habe dieses Snippet im <head> Abschnitt, 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 Anordnen dieses Problems verwenden könnte.
Danke für deine Gedanken.
Ich kann bestätigen, dass mein ursprünglicher Code zu funktionieren scheint. Ich hielt mich beiläufig an ein Bild mit einem falschen Pfad.
Hier ist ein Test: http://paragraphe.org/slidetoggletest/test.html
<script>
var pic = new Image();
var pic2 = new Image();
var pic3 = new Image();
pic.src="images/inputs/input1.png";
pic2.src="images/inputs/input2.png";
pic3.src="images/inputs/input3.png";
</script>
Bilder nur mit CSS vorladen
Im folgenden Code wähle ich zufällig das body -Element aus, da es eines der wenigen Elemente ist, deren Existenz auf der Seite garantiert ist.
Damit der "Trick" funktioniert, verwenden wir die content -Eigenschaft, mit der Sie bequem mehrere URLs laden können, aber wie gezeigt, die ::after Pseudoelement wird beibehalten versteckt damit die Bilder nicht gerendert werden:
body::after{
position:absolute; width:0; height:0; overflow:hidden; z-index:-1; // hide images
content:url(img1.png) url(img2.png) url(img3.gif) url(img4.jpg); // load images
}
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.
http://css-tricks.com/snippets/css/css-only-image-preloading/
Technik # 1
Laden Sie das Bild im regulären Zustand des Elements und verschieben Sie es nur mit der Hintergrundposition weg. Verschieben Sie dann die Hintergrundposition, um sie beim Hover anzuzeigen.
#grass { background: url(images/grass.png) no-repeat -9999px -9999px; }
#grass:hover { background-position: bottom left; }
Technik # 2
Wenn auf das betreffende Element bereits ein Hintergrundbild angewendet wurde und Sie dieses Bild ändern müssen, funktioniert das oben beschriebene nicht. Normalerweise wählen Sie hier ein Sprite (ein kombiniertes Hintergrundbild) und verschieben einfach die Hintergrundposition. Aber wenn das nicht möglich ist, probieren Sie es aus. Wenden Sie das Hintergrundbild auf ein anderes Seitenelement an, das bereits verwendet wird, aber kein Hintergrundbild hat.
#random-unsuspecting-element { background: url(images/grass.png) no-repeat -9999px -9999px; }
#grass:hover { background: url(images/grass.png) no-repeat; }
Vorladen von Bildern mit dem HTML <link> -Tag
Ich glaube, die meisten Besucher dieser Frage suchen nach der Antwort von "Wie kann ich ein Bild vorladen, bevor das Rendern der Seite beginnt?" und die beste Lösung für dieses Problem ist die Verwendung von <link> - Tag, da das <link> - Tag das weitere Rendern der Seite blockieren kann. Siehe preemptive
Diese beiden Wertoptionen des Attributs rel ( Beziehung zwischen dem aktuellen Dokument und dem verknüpften Dokument) sind für das Problem am relevantesten:
- Prefetch : Lädt die angegebene Ressource beim Rendern der Seite
- preload : Lädt die angegebene Ressource, bevor das Rendern der Seite beginnt
Wenn Sie also eine Ressource laden möchten ( in diesem Fall ist es ein Bild), bevor der Rendervorgang für das <body> - Tag beginnt, verwenden Sie:
<link rel="preload" as="image" href="IMAGE_URL">
und wenn Sie eine Ressource laden möchten, während <body> gerendert wird, diese aber später dynamisch verwenden möchten und den Benutzer nicht mit der Ladezeit belästigen möchten, verwenden Sie:
<link rel="prefetch" href="RESOURCE_URL">
versuche es mit diesem:
var c=new Image("Path to the background image");
c.onload=function(){
//render the form
}
Mit diesem Code laden Sie das Hintergrundbild vor und rendern das Formular, wenn es geladen wird
Wenn Sie diese BG-Bilder an einer anderen Stelle auf Ihrer Website für Formulareingaben wiederverwenden, möchten Sie wahrscheinlich ein Image-Sprite verwenden. Auf diese Weise können Sie Ihre Bilder zentral verwalten (anstelle von Bild1, Bild2, Bild3 usw.).
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 Artikel SO):
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 kann jedoch sinnvoll sein.
Die effizienteste Antwort für das Vorabladen von mit CSS erstellten Hintergrundbildern war eine modifizierte Version eines Codes, den ich gefunden habe und der nicht funktioniert hat:
$(':hidden').each(function() {
var backgroundImage = $(this).css("background-image");
if (backgroundImage != 'none') {
tempImage = new Image();
tempImage.src = backgroundImage;
}
});
Der enorme Vorteil davon ist, dass Sie es nicht aktualisieren müssen, wenn Sie in Zukunft neue Hintergrundbilder einspielen. Es findet die neuen und lädt sie vor!
Sie können dieses jQuery-Plugin verwenden waitForImage oder Sie können Ihre Bilder in ein verstecktes div oder (width: 0 und height: 0) einfügen und das onload-Ereignis für Bilder verwenden.
Wenn Sie nur 2-3 Bilder haben, können Sie Ereignisse binden und sie in einer Kette auslösen, so dass Sie nach jedem Bild Code machen können.
wie wäre es, das Hintergrundbild irgendwo versteckt zu laden? Auf diese Weise wird es geladen, wenn die Seite geöffnet wird, und es dauert keine Zeit, bis das Formular mit Ajax erstellt wurde:
body {
background: #ffffff url('img_tree.png') no-repeat -100px -100px;
}
Wenn es nicht möglich ist, CSS-Code zu ändern und Bilder mit CSS-Regeln für :before Oder :after Pseudoelemente vorzuladen, kann ein anderer Ansatz mit JavaScript-Code verwendet werden, der CSS-Regeln geladener Stylesheets durchläuft. Damit es funktioniert Skripte sollten nach Stylesheets eingefügt werden in HTML, zum Beispiel vor dem Schließen des body -Tags oder direkt nach Stylesheets.
getUrls() {
const urlRegExp = /url\(('|")?([^'"()]+)('|")\)?/;
let urls = [];
for (let i = 0; i < document.styleSheets.length; i++) {
let cssRules = document.styleSheets[i].cssRules;
for (let j = 0; j < cssRules.length; j++) {
let cssRule = cssRules[j];
if (!cssRule.selectorText) {
continue;
}
for (let k = 0; k < cssRule.style.length; k++) {
let property = cssRule.style[k],
urlMatch = cssRule.style[property].match(urlRegExp);
if (urlMatch !== null) {
urls.Push(urlMatch[2]);
}
}
}
}
return urls;
}
preloadImages() {
return new Promise(resolve => {
let urls = getUrls(),
loadedCount = 0;
const onImageLoad = () => {
loadedCount++;
if (urls.length === loadedCount) {
resolve();
}
};
for (var i = 0; i < urls.length; i++) {
let image = new Image();
image.src = urls[i];
image.onload = onImageLoad;
}
});
}
document.addEventListener('DOMContentLoaded', () => {
preloadImages().then(() => {
// CSS images are loaded here
});
});
Die einzige Möglichkeit besteht darin, das Bild mit Base64 zu codieren und in den HTML-Code einzufügen, damit keine Verbindung zum Server hergestellt werden muss, um das Bild herunterzuladen.
This kodiert ein Bild aus der URL, so dass Sie den Bilddateicode kopieren und wie folgt in Ihre Seite einfügen können ...
body {
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...);
}
Befinden sich die Seitenelemente und ihre Hintergrundbilder bereits im DOM (d. H. Sie erstellen/ändern sie nicht dynamisch), werden ihre Hintergrundbilder bereits geladen. An diesem Punkt sollten Sie sich die Komprimierungsmethoden ansehen :)