versteckte CSS-Bilder laden

Question

Ich arbeite an einer Jquery-basierten Homepage mit 5 oder mehr versteckten divs, die jeweils mehrere Hintergrund-CSS-Bilder enthalten.

Das Problem besteht darin, dass der Browser keine CSS-Bilder in das DOM lädt, bis die Sichtbarkeit der übergeordneten Ebene angezeigt wird. Dadurch werden Bilder langsam geladen, wenn die Ebene sichtbar wird.

Lösungen habe ich bereits in Betracht gezogen:

• CSS-Sprites (zu viel Arbeit für diese neu zu gestalten, und die Arbeit wird nicht wirklich, wenn Ein-/Ausblenden divs)
• This jQuery plugin, dass Auto-Lasten CSS Hintergrund Bilder (funktioniert einfach nicht für mich, wie von vielen anderen berichtet).

• Vorbelastung der Bilder über js:

  $(function() { 
  function preloadImg(image) { 
      var img = new Image(); 
      img.src = image; 
  } 
  
  preloadImg('/images/home/search_bg_selected.png'); 
  }); 
  

  Diese Lösung scheint zweimal das Bild in den dom zu laden ... einmal, wenn die js lädt sie, und dann wieder, wenn die div-Schicht, die es sichtbar lädt wird ... so macht es 2 HTTP-Aufrufe, also funktioniert nicht.

Irgendwelche anderen Lösungen für dieses Problem, die ich vermisse?

Answer 1

Wenn Sie andere Wege meinen, meinen Sie diejenigen, die kein Javascript verwenden?

<script language="JavaScript"> 
function preloader() 
{ 
    // counter 
    var i = 0; 

    // create object 
    imageObj = new Image(); 

    // set image list 
    images = new Array(); 
    images[0]="image1.jpg" 
    images[1]="image2.jpg" 
    images[2]="image3.jpg" 
    images[3]="image4.jpg" 

    // start preloading 
    for(i=0; i<=3; i++) 
    { 
      imageObj.src=images[i]; 
    } 
} 
</script> 

Weitere Angaben keine JS Wege sind einige HTML in Ihre Seite irgendwo zu platzieren, so ist es nicht gesehen:

<image src="picture.jpg" width="1" height="1" border="0"> 

oder HTML ...

<img src="images/arrow-down.png" class="hiddenPic" /> 

... und CSS. ..

.hiddenPic { 
    height:1px; 
    width:1px; 
} 

Weitere JavaScript Methoden:

function preload(images) { 
    if (document.images) { 
     var i = 0; 
     var imageArray = new Array(); 
     imageArray = images.split(','); 
     var imageObj = new Image(); 
     for(i=0; i<=imageArray.length-1; i++) { 
      //document.write('<img src="' + imageArray[i] + '" />');// Write to page (uncomment to check images) 
      imageObj.src=images[i]; 
     } 
    } 
} 

Dann die Bilder laden etwas mit wie:

<script type="text/javascript"> 
preload('image1.jpg,image2.jpg,image3.jpg'); 
</script> 

Answer 2

„Diese Lösung scheint zweimal das Bild in den dom zu laden ... einmal, wenn die js lädt sie, und dann wieder, wenn die div Schicht, die es lädt wird sichtbar ... so macht es 2 http Anrufe, somit nicht funktioniert“

Die zweite HTTP-Anfrage sollte in einem 304 antworten (nicht geändert), also denke ich, das ist in Ordnung? Weitere Optionen ist das Bild über jQuery zu laden und dann legen Sie als Hintergrundbild inline über DOM, wie:

jQuery.fn.insertPreload = function(src) { 
    return this.each(function() { 
     var $this = $(this); 
     $(new Image()).load(function(e) { 
      $this.css('backgroundImage','url('+src+')'); 
     }).attr('src',src); 
    }); 
}; 

$('div').insertPreload('[huge image source]'); 

Answer 3

Fest Codierung URLs wie die anderen Lösungen vorschlagen Orte eine Steuer auf Code Wartung. Es ist relativ einfach, dies zu vermeiden und eine allgemeine Lösung mit jQuery zu erstellen.

Diese Funktion wählt alle versteckten Elemente aus, prüft, ob sie Hintergrundbilder haben, und lädt sie dann in ein verstecktes Dummy-Element.

$(':hidden').each(function() { 
    //checks for background-image tab 
    var backgroundImage = $(this).css("background-image"); 
    if (backgroundImage != 'none') { 
    var imgUrl = backgroundImage.replace(/"/g,"").replace(/url\(|\)$/ig, ""); 
    $('<img/>')[0].src = imgUrl; 
    } 
}); 

Answer 4

CSS-Vorladung ist einfach.

Beispiel:

body:after{ 
    display:none; 
    content: url(img01.png) url(img02.png) url(img03.png) url(img04.png) 
} 

Answer 5

Browser beginnen prefetch und preload Eigenschaften des <link> Elements rel="..." Eigenschaft zu unterstützen.

Addy Osmani des post about the preload and prefetch properties ist ausgezeichnet und beschreibt, wenn sie verwendet werden soll:

Preload ist eine frühe Anweisung an den Browser holen eine Ressource für eine Seite (Schlüssel-Skripte, Web Fonts, hero Bilder benötigt anfordern).

Prefetch dient einen etwas anderen Anwendungsfall - eine Zukunft Navigation durch den Benutzer (zum Beispiel zwischen den Ansichten oder Seiten), in die abgerufenen Ressource und Anforderungen über Navigations bestehen bleiben müssen. Wenn Seite A eine Vorababrufanforderung für kritische Ressourcen initiiert, die für Seite B benötigt werden, können die kritischen Ressourcen- und Navigationsanforderungen unter parallel ausgeführt werden. Wenn wir Preload für diesen Anwendungsfall verwenden, wird sofort beim Entladen der Seite A abgebrochen.

<link rel="preload" as="image" href="https://your.url.com/yourimage.jpg" /> 

Ich bin der Gestaltung ein Formular mit mehreren Schritten, und jeder hat eine andere Hintergrundbild:

Das Element wird wie so verwendet. Dieses Muster löst ein "Blinken" zwischen den Schritten auf, wenn Chrome das nächste Hintergrundbild herunterlädt.