Synchronisation d'un chargeur de pages uniquement avec les images visibles à l'aide de imagesLoaded

Je pense que je suis très proche de comprendre cela, mais je ne maîtrise pas javascript et jquery. La solution que j'essaie d'utiliser est imagesLoaded (http://imagesloaded.desandro.com/). Essentiellement, je veux qu'une page avec un grand contenu modal (caché sur le chargement de la page) apparaisse pour charger beaucoup plus rapidement. En d'autres termes, je souhaite que le chargeur (superposition grise avec spinner) disparaisse lorsque les images visibles sont chargées, même si les images modales continuent de se charger en arrière-plan.Synchronisation d'un chargeur de pages uniquement avec les images visibles à l'aide de imagesLoaded

Ma stratégie consiste à créer un div dans le HTML et à placer une copie de chaque image visible à l'intérieur. Dans mon CSS, j'utilise ce div comme 'display: none;' et peut-être le positionner '-9999' en haut et à gauche. Donc, cette div va charger les images mais ne jamais dessiner sur l'écran.

Maintenant, je veux déclencher la fonction '.fadeOut' pour les éléments du chargeur avec imagesLoaded, affecté à la div ci-dessus. De cette façon, l'interface utilisateur apparaîtra prête pendant que les images modales cachées restantes terminent le chargement.

J'essaie c'est jquery comme suit:

<script> 
 

 
$('#container').imagesLoaded(function() { 
 
    $(".loader").fadeOut("slow"); 
 
\t $(".spinner").fadeOut("slow"); 
 
\t $(".spinnerwrapper").fadeOut("slow"); 
 
}); 
 

 
</script>

.loader { 
 
\t position: fixed; 
 
\t top: 77px; 
 
\t background-color: #000; 
 
\t opacity:0.80; 
 
\t filter:alpha(opacity=80); /* For IE8 and earlier */ 
 
\t left: 0px; 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t z-index: 900; 
 
} 
 

 
\t #container { 
 
\t position: fixed; 
 
\t display:none; 
 
\t left: -9999px; 
 
\t top: -9999px; 
 
}

<!-- page header --> 
 
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> 
 

 
<script src="https://npmcdn.com/[email protected]/imagesloaded.pkgd.min.js"></script></head> 
 

 
<div id="spinnerwrapper"> 
 
\t \t <div class="spinner"></div> 
 
\t </div> 
 
\t 
 
\t <div class="loader"></div> 
 

 
<!-- visible page content --> 
 

 
<div id="container"> 
 
\t <img src="images/image_1.jpg"> 
 
    <img src="images/image_2.jpg"> 
 
    <img src="images/image_3.jpg"> 
 
    <!-- etc --> 
 
</div> 
 
</body> 
 

 
<!-- hidden modal content -->

Je suis presque certain que ma syntaxe est mal là-bas. Je suis en train d'apprendre les bases du script. Quelqu'un peut-il s'en sortir? Ou fournir une solution aternate?

Source

2016-10-11 evanonearth

Obtenir un message d'erreur: Uncaught TypeError: $ (...) imagesLoaded est pas une fonction – evanonearth

Pouvez-vous expliquer pourquoi vous utilisez gauche. -9999px; & haut: -9999px; ?? dans l'ID du conteneur ?? et l'autre question est pourquoi utiliser spinnerwrapper, spinner div ?? Et le principal problème que vous écrivez le script mal. vous ne définissez pas l'ID du conteneur via css. Mais vous ne le faites pas apparaître après le fondu du chargeur. [https://jsfiddle.net/tjbaezid/tmqsd8uo/] –

Pour déclencher quelque chose comme un .fadeOut(), vous pouvez l'utiliser comme ceci:

$('#container').imagesLoaded({ 
    // options... 
    }, 
    function() { 
     $('.fade-it').delay(2000).fadeOut(500); 
});

Vérifiez le violon pour voir le feu: https://jsfiddle.net/qx5eoo3j/

Source

2016-10-11 19:00:49

Vous avez une erreur dans votre JS, essayez ceci:

$('#container').imagesLoaded({}, function() { 
    $(".loader").fadeOut("slow"); 
    $(".spinner").fadeOut("slow"); 
    $(".spinnerwrapper").fadeOut("slow"); 
    $('#container').show(); 
});

JSFiddle

Source

2016-10-11 19:10:32 Lorenzo

Je reçois toujours le message: Uncaught TypeError: $ (...). imagesLoaded n'est pas une fonction Cela signifie-t-il que le lien source du script est incorrect? – evanonearth

Cela signifie que imageLoaded n'est pas chargé – Lorenzo

J'espère que cela fonctionnera pour vous. (Je viens d'ajouter l'image d'échantillon plus de 3) Supprimer Les éléments sont [position: fixed; à gauche: -9999px; & en haut: -9999px; de css #container spinnerwrapper, spinner DIV de la partie html. Parce que je ne vois aucune utilisation de ceux-ci]. Si vous avez des questions sur cette réponse, demandez-moi un commentaire. LiveOnFiddle

$('#container').imagesLoaded(function() { 
 
    $(".loader").fadeOut("slow"); 
 
    $('#container').show(); 
 
});

.loader { 
 
    \t position: fixed; 
 
    \t top: 0; 
 
    \t background-color: #000; 
 
    \t opacity: 0.80; 
 
    \t filter: alpha(opacity=80); 
 
    \t /* For IE8 and earlier */ 
 
    \t left: 0px; 
 
    \t width: 100%; 
 
    \t height: 100%; 
 
    \t z-index: 900; 
 
    \t } 
 
    \t 
 
    \t #container { 
 
    \t display: none; 
 
    \t }

<head> 
 
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> 
 

 
<script src="https://npmcdn.com/[email protected]/imagesloaded.pkgd.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <div class="loader"></div> 
 

 
<!-- visible page content --> 
 

 
<div id="container"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x150"> 
 
<!-- etc --> 
 
</div> 
 
    </body>

Source

2016-10-11 20:03:17

Synchronisation d'un chargeur de pages uniquement avec les images visibles à l'aide de imagesLoaded

Répondre

Questions connexes