Fondu Dans un Div avec une image de fond après le chargement

Je suis en train de faner dans une div qui a une ligne de l'image de fond en elle.

Je l'ai essayé sur des images au chargement de la page, mais comment pouvons-nous arriver à cet effet avec des images de fond dans un div.

  • stackoverflow.com/questions/6285809/...
  • non, ce ne marche pas répondre à ma question.
  • il n'existe aucun moyen à ma connaissance pour détecter lorsque l'image d'arrière-plan chargé.. donc la seule solution est d'utiliser un autre événement load de la technique
InformationsquelleAutor designerNProgrammer | 2014-02-23
  1. 3

    Vous Pouvez Utiliser un plugin jQuery appelé waitForImages qui permet de détecter quand l'arrière-plan des images, ont été téléchargés.

    $('selector').waitForImages({
    finished:function(){$(this).slideUp();},
    waitForAll:true
});
    • Je parlais de l'image de fond sur les div.
    • J'ai mis à jour Ma réponse
    • Que le code ne se soucient pas des images d'arrière-plan. Vous avez besoin de lire la documentation du projet de plus près.
    • ensemble waitForAll: vrai et images d'arrière-plan sera inclus. Réponse d'édition.
    • génial!
    • waitForImages est grand

    InformationsquelleAutor Mahmoude Elghandour
  2. 2

    La deuxième réponse de la Question liée dans les commentaires, Lien ici, fournit une solution lorsque vous chargez une image de fond d'écran à une balise d'image, puis quand il est prêt de vous injecter de l'image dans un div. Voici un exemple similaire, mais différent:

    html:

    <img src="http://www.modernmythmedia.com/wp-content/uploads/2013/04/Iron-Man-wallpaper-2-2032-e1367196003357.jpg" id="dummy" style="display:none;" alt="" />
<div id="pic" style="height:100px;width:100px;display:none;"></div>

    jQuery:

    $('#dummy').ready(function() {
    $('#pic').css('background-image','url(http://www.modernmythmedia.com/wp-content/uploads/2013/04/Iron-Man-wallpaper-2-2032-e1367196003357.jpg)');
    $('#pic').fadeIn(1000);
});

    Avec l'aperçu en direct ici: Violon.

    J'espère que cela fonctionne mieux pour vous!

    • hé, mon pote j'en ai besoin pour un fondu en ouverture après l'image a été chargé.merci.
    • Bon appel. J'ai mis à jour ma réponse pour être plus proche de ce que vous cherchez.
    • Je suggère également de placer l'arrière-plan de l'url de la div. Vous probaly pouvez le faire que lorsque vous mettez ensemble le modèle, tandis que la méthode JS prend de la ressource: jsfiddle.net/unUc8/8. J'ai aussi pris la liberté de retrait de l'image après la charge, en minimisant le DOMsize (bien que l'on pourrait argumenter sur le CPU il faut les supprimer)
    • Mise à jour de la réponse de div#id à #id. Lors de l'utilisation de l'id, il peut utiliser getElementById(), lorsque vous ajoutez de la div, il a aussi pour tester si c'est un div, et il ne peut plus utiliser le fast fonctions 🙂
    InformationsquelleAutor Blundering Philosopher
  3. 0

    D'Animation HTML5 va charger un contexte de canevas qui permet ce et plus.

    Ici est le CSS de démonstration de l'animation.

    InformationsquelleAutor Kraken
  4. -1

    Pouvez-vous essayer cela?

    HTML

    <div id="mg" style="background-image:url(http://lorempixel.com/1920/1920/); display:none; width:1920px; height:1920px;"></div>

    JS

    var elem   = $('#mg'),
    bgImg  = elem.css('background-image'),
    imgUrl = bgImg.indexOf('"')!=-1 ? 
             bgImg.replace('url("','').replace('")','') : 
             bgImg.replace('url(','').replace(')',''),

     nwImg = new Image();
     nwImg.src = imgUrl;

nwImg.onload = function() {
    elem.fadeIn('fast');
}

nwImg.onerror = function() {
    alert('error');
}

    JsFiddle

    http://jsfiddle.net/EZg36/8/

    Si vous modifiez l'URL de façon incorrecte, vous verrez que le message d'erreur (par exemple: background-image:url(hERRRttp://lorempixel.com/1920/1920/);)

    • Je me demandais, pourquoi mg, pas img?
    • Je ne sais pas, sans raison particulière 🙂
    InformationsquelleAutor midstack