Afficher le slideshow en priorité

**Mabal972** · 19/08/2012, 15h17

Bonjour

Je viens de créer un petit site en HTML5 et CSS3
Il y a 1 slideshow JQuery dans le Header
puis une video Youtube dans un IFrame

Mon soucis:
Le slideshow ne s'affiche pas de suite depuis que j'ai intégré la video Youtube?
cela mets plusieurs secondes, alors que sans la video, il s'affichait de suite...

Pouvez vous m'aider svp?
Merci beaucoup de votre aide
Marc

Code :

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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
 
<!doctype html>
<html lang="fr">
<head>
           <!-- Encodage des caracteres Universel-->
     <meta charset="utf-8" />
 
     <meta name="keywords" content="mots-clés" />
     <meta name="description" content="description" />
     <meta name="author" content="auteur">
 
          <!-- C le titre affiché dans l'onglet de ma page-->
     <title>Défi Kite Serge OCCHIPINTI</title>
 
          <!-- C le lien vers mon ou mes fichier CSS-->
     <link rel="stylesheet" href="styles.css" type="text/css" />
 
          <!-- C le JavaScript ki permet aux anciens navigateur IE de reconnaitre le HTML5-->                   
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 
 
 <!-- ************************ SlideShow FlexSlider ************************** -->
    <!-- FlexSlider pieces -->	
	<link rel="stylesheet" href="flexslider.css" type="text/css" media="screen" />
	<script src="js/jquery-1.8.0.min.js"></script>
	<script src="js/jquery.flexslider-min.js"></script>
	<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
 
	<!-- Hook up the FlexSlider -->
	<script type="text/javascript">
                $(window).load(function() {
                        $('.flexslider').flexslider();
                });
        </script>
<!-- *************** End of SlideShow FlexSlider ************************** -->
</head>
 
 
<body>         
<div id="wrapper"><!-- #wrapper -->
 
<header><!-- header -->
 
	<div class="titre_defi">
	<img src="titres/defi_kitesurf_5d3.png"  alt="">
	</div>
 
 
<!-- ************************ SlideShow FlexSlider ************************** -->	
<div class="flexslider">	   
	   <ul class="slides"> 	    
	    	<li class="slide"><img src="demo-stuff/11-web.jpg" /></li>
	    	<li class="slide"><img src="demo-stuff/22-web.jpg" /></li>	    	
	    	<li class="slide"><img src="demo-stuff/44-web.jpg" /></li>
	    	<li class="slide"><img src="demo-stuff/55-web.jpg" /></li>	    	
	    	<li class="slide"><img src="demo-stuff/66-web.jpg" /></li>
	        <li class="slide"><img src="demo-stuff/77-web.jpg" /></li>
	    	<li class="slide"><img src="demo-stuff/99-web.jpg" /></li>	    	
	    </ul>	 
	 </div>	
<!-- ******************** End of SlideShow FlexSlider ********************** -->	
 
 
</header><!-- end of header -->
 
 
<!--  ============= MENU NAV ===========================   -->
	<nav><!-- top nav -->
		<div class="top_menu">
			<ul>
				<li><a href="#">Accueil</a></li>
				<li><a href="#">Mon Défi Kite</a></li>
				<li><a href="#">Mon Parcours</a></li>
				<li><a href="#">Blog</a></li>
				<li><a href="#">Actualités</a></li>
				<li><a href="#">Me Soutenir</a></li>
			</ul>
		</div>
	</nav><!-- end of top nav -->
<!--  =================================================   -->
	<section id="main"><!-- #main content and sidebar area -->
			<section id="content"><!-- #content -->
 
 
<article>
		<h2><a href="#">Video</a></h2>
 
 
<!--  =============== VIDEO YOUTUBE ===================   -->
 
	<iframe width="560" height="315" src="http://www.youtube.com/embed/MnSjbLnPOnM" frameborder="0" allowfullscreen></iframe>
 
</article>	
 
</div><!-- #bloc_page -->
</body>
</html>

**Vil'Coyote** · 22/08/2012, 16h16

une page html se charge non pas de manière séquentiel mais intégrale. donc ton slideshow ne fonctionnera que si toute la page est charger (d'ou le problème avec la vidéo) pour y remédier il faudrait séparer ton slide show de ta video en les alimentant via de l'ajax asynchrone. cela permettrait de charger chaque zone indépendamment.

**v1cent** · 23/08/2012, 16h45

Une autre solution facile, comme tu utilie jquery, c'est de charger ta vidéo après l'initialisation de ton menu (et pas en même temps comme le propose mon prédécesseur)

Code :

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

1
2
3
4
5
 
		$(window).load(function() {
			$('.flexslider').flexslider();
			$('article').append('<iframe width="560" height="315" src="http://www.youtube.com/embed/MnSjbLnPOnM" frameborder="0" allowfullscreen></iframe>');
		});

et tu supprime ta balise de la page ... (à tester, tu peux ajouter un id à ton article pour plus de sécurité)

Afficher le slideshow en priorité

HTML

Vue hybride

Discussions similaires

Partager

Partager