précharger les images CSS cachées

Question

Je travaille sur une page d'accueil basée sur jquery avec 5 divs cachés, contenant chacun plusieurs images css en arrière-plan. Le problème est que le navigateur ne charge pas les images css dans le DOM tant que la visibilité de la couche parente n'est pas affichée, provoquant le chargement lent des images lorsque la couche devient visible.

Solutions J'ai déjà pris en compte:

• sprites CSS (trop de travail à redessiner pour cela, et la coutume fonctionne vraiment en montrant/cacher divs)
• This jQuery plugin que les images d'arrière-plan CSS auto-des charges (tout simplement ne fonctionne pas pour moi comme rapporté par beaucoup d'autres).

• précharger les images via js:

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

  Cette solution semble charger l'image dans le dom deux fois ... une fois que lorsque les charges js, puis à nouveau lorsque la couche div qui charge devient visible ... donc il fait 2 appels HTTP, donc ne fonctionne pas.

D'autres solutions pour ce problème qui me manque?

Answer 1

Lorsque vous avez dit d'autres moyens, voulez-vous dire ceux qui n'utilisent pas Javascript?

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

Autres aucun JS moyens doivent placer une partie html dans votre page quelque part il est donc pas vu:

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

ou HTML ...

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

... et CSS. ..

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

Plus: Méthodes JavaScript

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]; 
     } 
    } 
} 

charger ensuite les images en utilisant quelque chose comme:

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

Answer 2

« Cette solution semble charger l'image dans le dom deux fois ... une fois que lorsque le js le charge, puis à nouveau lorsque la couche div qui le charge devient visible ... donc il fait 2 appels http, ne fonctionne donc pas "

La deuxième requête http devrait répondre dans un 304 (non modifié), donc je suppose que c'est ok? Une autre option consiste à charger l'image via jQuery puis insérez en ligne d'image d'arrière-plan via DOM, comme:

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

URL de codage durs comme les autres solutions suggèrent endroits une taxe sur la maintenance du code. Il est relativement facile d'éviter cela et de faire une solution générale avec jQuery.

Cette fonction sélectionne tous les éléments cachés, vérifie s'ils contiennent des images d'arrière-plan, puis les charge dans un élément factice caché.

$(':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

Le préchargement CSS est facile.

Exemple:

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

Answer 5

Les navigateurs commencent à soutenir prefetch et preload propriétés de la propriété rel="..." de l'élément <link>.

Addy Osmani de post about the preload and prefetch properties est excellent et décrit quand ils devraient être utilisés:

préchargement est un début de lecture d'instructions au navigateur pour demander une ressource nécessaire pour une page (scripts clés, polices Web, images héros). La fonction de prélecture utilise un cas d'utilisation légèrement différent - une navigation future par l'utilisateur (par exemple, entre les vues ou les pages) où les ressources extraites et les demandes doivent persister entre les navigations. Si la page A initie une demande de prélecture pour les ressources critiques nécessaires pour la page B, les demandes de ressources et de navigation critiques peuvent être complétées en en parallèle. Si nous utilisions le préchargement pour ce cas d'utilisation, ce serait immédiatement annulé lors du déchargement de la page A.

L'élément est utilisé comme ceci:

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

Je suis la conception d'un formulaire avec plusieurs étapes, et chacun a une image d'arrière-plan différent. Ce modèle résout un "clignotement" entre les étapes lorsque Chrome télécharge l'image d'arrière-plan suivante.