Vorladen von CSS-Bildern

Ich habe ein verstecktes Kontaktformular, das durch Klicken auf eine Schaltfläche aktiviert wird. Seine Felder sind als CSS-Hintergrundbilder festgelegt und erscheinen immer ein wenig später als die div, die umgeschaltet wurden.

Ich benutzte dieses Snippet im Abschnitt, aber ohne Glück (nachdem ich den Cache gelöscht hatte):

  $(document).ready(function() { pic = new Image(); pic2 = new Image(); pic3 = new Image(); pic.src="/images/inputs/input1.png"; pic2.src="/images/inputs/input2.png"; pic3.src="/images/inputs/input3.png"; });  

Ich benutze jQuery als meine Bibliothek, und es wäre cool, wenn ich es auch für die Einrichtung dieses Problems verwenden könnte.

Danke für deine Gedanken.

    Bilder nur mit CSS vorladen

     body::after{ position:absolute; width:0; height:0; overflow:hidden; z-index:-1; content:url(img01.png) url(img02.png) url(img03.png) url(img04.png); } 

    Demo


    Es ist besser, ein Sprite-Bild zu verwenden, um HTTP-Anfragen zu reduzieren …
    (wenn es viele relativ kleine Bilder gibt)

    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

      

    http://css-tricks.com/snippets/css/css-only-image-preloading/

    Technik # 1

    Laden Sie das Bild in den regulären Zustand des Elements, verschieben Sie es nur mit der Hintergrundposition. Bewegen Sie dann die Hintergrundposition, um sie bei 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 obige nicht. Normalerweise würden Sie hier ein Sprite wählen (ein kombiniertes Hintergrundbild) und einfach die Hintergrundposition verschieben. 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.

     #random-unsuspecting-element { background: url(images/grass.png) no-repeat -9999px -9999px; } #grass:hover { background: url(images/grass.png) no-repeat; } 

    versuche damit:

     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 beim Laden

    Wenn Sie diese bg-Bilder an einem anderen Ort Ihrer Website für Formulareingaben erneut verwenden, möchten Sie wahrscheinlich ein Bild-Sprite verwenden. Auf diese Weise können Sie Ihre Bilder zentral verwalten (anstatt pic1, pic2, pic3, etc …).

    Sprites sind im Allgemeinen schneller für den Client, da sie nur eine (wenn auch etwas größere) Datei vom Server anfordern, anstatt mehrere Dateien. Siehe SO-Artikel für weitere Vorteile:

    CSS-Bildsprites

    Andererseits ist dies möglicherweise nicht hilfreich, wenn Sie diese nur für ein Formular verwenden und Sie diese nur wirklich laden möchten, wenn der Benutzer das Kontaktformular anfordert.

    http://www.alistapart.com/articles/sprites

    Für das Vorladen von Hintergrundbildern, die mit CSS gesetzt wurden, war die effizienteste Antwort, die ich mir ausgedacht hatte, eine modifizierte Version eines Codes, den ich nicht funktionierte:

     $(':hidden').each(function() { var backgroundImage = $(this).css("background-image"); if (backgroundImage != 'none') { tempImage = new Image(); tempImage.src = backgroundImage; } }); 

    Der große Vorteil davon ist, dass Sie es nicht aktualisieren müssen, wenn Sie neue Hintergrundbilder in der Zukunft einbringen, es wird die neuen finden und sie vorab laden!

    Bilder vorladen mit HTML 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?” und die beste Lösung für dieses Problem ist die Verwendung des -Tags, da das -Tag in der Lage ist, das weitere Rendern der Seite zu blockieren. Siehe präventiv

    Diese zwei Wertoptionen für das Attribut rel ( Beziehung zwischen dem aktuellen Dokument und dem verknüpften Dokument ) sind am relevantesten für das Problem:

    • Prefetch : lädt die angegebene Ressource beim Seitenrendering
    • preload : Laden Sie die angegebene Ressource, bevor das Seitenrendering gestartet wird

    Wenn Sie also eine Ressource ( in diesem Fall ein Bild ) laden möchten, bevor der Renderprozess des -Tags beginnt, verwenden Sie:

      

    Wenn Sie eine Ressource laden möchten, während gerendert wird, aber Sie planen, sie später dynamisch zu verwenden und den Benutzer nicht mit Ladezeiten belästigen möchten, verwenden Sie:

      

    Wie wäre es, dieses Hintergrundbild irgendwo zu laden? Auf diese Weise wird es geladen, wenn die Seite geöffnet wird und es wird keine Zeit dauern, wenn das Formular mit ajax erstellt wurde:

     body { background: #ffffff url('img_tree.png') no-repeat -100px -100px; } 

    Sie könnten dieses jQuery-Plugin waitForImage verwenden oder Sie könnten Bilder in ein verstecktes div oder (width: 0 und height: 0) setzen und das onload-Ereignis in Bildern 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 etwas Code machen können.

    Wenn es keine Möglichkeit gibt, CSS-Code zu modifizieren und Images mit CSS-Regeln :before laden, können Sie :before oder :after Pseudoelementen einen anderen Ansatz mit JavaScript-Code verwenden, der CSS-Regeln von geladenen Stylesheets durchläuft. Um es funktionstüchtig zu machen, sollten Skripte nach Stylesheets in HTML eingefügt werden, zum Beispiel vor dem Schließen von 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 }); }); 

    Wenn sich die Seitenelemente und deren Hintergrundbilder bereits im DOM befinden (dh Sie erstellen oder ändern sie nicht dynamisch), werden ihre Hintergrundbilder bereits geladen. An diesem Punkt möchten Sie vielleicht auf Kompressionsmethoden schauen 🙂

    Die einzige Möglichkeit besteht darin, Base64 das Bild zu codieren und es in den HTML-Code einzufügen, so dass es den Server nicht kontaktieren muss, um das Bild herunterzuladen.

    Dadurch wird ein Bild von der URL codiert, so dass Sie den Bilddateicode kopieren und so in Ihre Seite einfügen können.

     body { background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...); }