jquery background image préchargement

Question

J'ai beaucoup de div.image, chacun a une taille énorme. Comment puis-je ajouter un loader image lorsque l'arrière-plan div est en cours de chargement et supprimer le loader image après le chargement de l'arrière-plan terminé?

$('.image').append('<img src="image/loading.gif" class="loading" />'); 

<div class="image" style="background:url(https://lh3.googleusercontent.com/-3prblPgZ3n4/To9btWmWSFI/AAAAAAAAB2c/Ojs-7Ql3r6w/s720/DSC_2120.JPG) 0 0 no-repeat;width:720px;height:478px;overflow:hidden;"></div> 

Answer 1

$('.image').append('<img src="image/loading.gif" class="loading" />'); 

$.get("https://lh3.googleusercontent.com/-3prblPgZ3n4/To9btWmWSFI/AAAAAAAAB2c/Ojs-7Ql3r6w/s720/DSC_2120.JPG", function(data){ 
    $('.image').html(data); 
}); 

---

Voici une version différente (qui fonctionne):

Fiddle: http://jsfiddle.net/maniator/ucdju/

var loading = $('<img src="image/loading.gif" class="loading" />'); 
$('.image').append(loading); 

var image = $('<img>').attr('src', 'https://lh3.googleusercontent.com/-3prblPgZ3n4/To9btWmWSFI/AAAAAAAAB2c/Ojs-7Ql3r6w/s720/DSC_2120.JPG'); 

image.bind('load', function(data){ 
    $('.image').css('background-image',"url("+this.src+")") 
     .width(this.width).height(this.height); 
    loading.remove(); 
}); 

Answer 2

<style type="text/css"> 
    .image { 
     background: url(image/loading.gif) center center no-repeat; 
    } 
</style> 

<div class="image"> 
    <div style="background:url(https://lh3.googleusercontent.com/-3prblPgZ3n4/To9btWmWSFI/AAAAAAAAB2c/Ojs-7Ql3r6w/s720/DSC_2120.JPG) 0 0 no-repeat;width:720px;height:478px;overflow:hidden;"></div> 
</div> 

De cette façon, votre div.image a le chargeur en arrière-plan et quand l'ima ge charge il va juste couvrir l'arrière-plan.

Je voudrais utiliser plusieurs arrière-plans sur une seule balise div, mais il n'est pas pris en charge dans tous les navigateurs, donc ajouté div supplémentaire.

Answer 3

l'image de fond est buggée! Utiliser le fond

Chargement des images d'arrière-plan dans jQuery mobile réussit ~ 50% du temps. Donc, tout le monde codant une application jqm cherchera à s'assurer que l'image d'arrière-plan div est visible (visible, affichée, chargée, chargée). Aimez l'événement entrée JQM docs pour .load() (de .on ('charge' ..). En fait, dit .load() n'est pas navigateur compatible cross et propose aucune solution.

Quelqu'un brûler Le site de documentation de jQuery

Le code de @Neil fonctionne avec une faille ÉNORME. @Moe fournit la solution, mais son explication est inutile et trompeuse. @Moe css a la gemme manquante. , "l'image de fond ne fonctionnera pas et l'arrière-plan le fera!"

Confirme @Moe Astuce css

http://www.webmasterworld.com/css/3557554.htm

LA SOLUTION COMPLETE

$('#somediv').waitForImages(function() { 
    console.log("Images done loading"); 
}, 
function(loaded, count, success) { 
    var $imageDiv = $(this); 
    var url = $imageDiv.css('background-image'); 
    var lngDivWidth = $imageDiv.css('width'); 
    var lngDivHeight = $imageDiv.css('height'); 
    var bckgnd_src = url.replace(/^url\(["']?/, '').replace(/["']?\)$/, ''); 
    //hardcoded just for demonstration purposes. 
    bckgnd_src = 'https://lh3.googleusercontent.com/-3prblPgZ3n4/To9btWmWSFI/AAAAAAAAB2c/Ojs-7Ql3r6w/s720/DSC_2120.JPG'; 

    if (!success) { 
    var $cacheImage = $('<img id="tempImg" />').attr('src', bckgnd_src).on('load', 
         function(e) { 
          $imageDiv.css('background', 'url('+bckgnd_src+')'); 
          $imageDiv.width(lngDivWidth).height(lngDivHeight); 
         }); 
    } 
    //jqm takes all opportunities to fail. Force display again. 
    $imageDiv.css('background', 'url('+bckgnd_src+')'); 
}, true); 

Pour tester vraiment, besoin d'une application multiple page JQM. 10 images par page avec navigation entre les pages.

Ne fera que gâcher les pages complètement mises en cache lorsque ce code n'est même pas exécuté. Plz quelqu'un suggestion comment s'assurer que cette fonction peut être exécutée même sur les pages en cache.

Dépendance Plugin WaitForImages (également avec docs incompréhensible)

https://github.com/alexanderdickson/waitForImages