Image pré loader

**mhmdsaji** · 28/07/2013, 12h01

Bonjour

Je travail sur un site et l'idée c'est que le visiteur est invité à scroller la page et le plus qu'il scroll un compteur s'incrémente et le background change. Le backgound contient une série d'images qui changent automatiquement avec le scroll et qui donnent l'impressions qu'on est entrain de rouler dans un train. Ce que je veux faire c'est de pré loader tout le site avec les images aussi avant de l'afficher. J'ai trouvé des plug in qui font ça mais le problème ces que ces plug in marche lorsque ces images sont affichées sur la page mais moi mes images je les appels avec une fonction javascript donc j'ai pas de contenu sur le site à part un div qui affiche la distances passé.

J'ai trouvé un plug in qui s'appel QueryLoader qui marche très bien, leger et très simple à utilisé mais je ne sais pas ce que je doit faire pour que ça fonctionne. Merci !

Voici le code de ma page d'acceuil:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<title>The Deepest Site Test </title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="css/queryLoader.css" type="text/css">
<script src="js/jquery-1.10.2.min.js"></script>
<script src='js/distance.js'></script>
<script src='js/going.js'></script>
<script type='text/javascript' src='js/queryLoader.js'></script>
</head>
<body>
<input type="hidden" id="index" value="1"> <!-- un hidden ou je vais stocker une valeur pour parcourir les images -->
<input type="hidden" id="position"> <!-- un hidden ou je vais stocker une valeur pour le positionnement de la barre de féfilement -->
<div id="info" onscroll="OnScrollpage()"> </div> <!-- Combien de mettre parcouru -->
   <!-- Appel au plug in QueryLoader sur le Body -->
   <script type='text/javascript'>
   QueryLoader.selectorPreload = "body";
QueryLoader.init();
</script>
</body>
</html>

**danielhagnoul** · 29/07/2013, 14h30

Bonjour

La dernière version et des exemples : http://www.gayadesign.com/diy/queryl...ges-with-ease/

Image pré loader

jQuery

Vue hybride

Discussions similaires

Partager

Partager