[AJAX] Script éxécuté trop tôt avant fin chargement images - JQuery
Bonjour à tous,
je suis actuellement en train de développer une sorte de portfolio avec beaucoup de galeries d'images. J'utilise de l'AJAX via JQuery pour charger dynamiquement ces images contenues dans divers fichiers HTML.
Une fois ces images chargées, un script "carrousel" s’exécute sur ces images. Malheureusement, les images ne sont complètement pas chargées et le script s' exécute trop tot.
J'aimerai que le chargement de ces images se finisse avant que le script se lance.
Voici un bout de mon code:
Code:
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
| $(document).ready (function(){
$("#menu a").click(function(e) {
e.preventDefault();
page = $(this).attr("href");
$.ajax ({
url: page,
cache: false,
success: function(html){
afficher(html);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert (textStatus);
}
})
});
});
function afficher(data){
$("#content").fadeOut(500, function(){
$("#content").empty();
$("#content").append(data).fadeIn(1000);
$.getScript('./js/jquery.carousel.min.js', function() {
// Utilisation du carousel
$("div.foo").carousel({ nextBtn: '<img src="./img/next.png" alt="next" />', prevBtn: '<img src="./img/previous.png" alt="next" />' });
});
});
} |
J'ai réussi à faire l'équivalent en statique sans AJAX mais j'aimerai le rendre plus esthétique, d'où AJAX. Sauf si quelqu'un trouve une alternative.
Voici l'alternative en statique:
Code:
1
2
3
4
5
6
7
8
9
10
| $(document).ready(function(){
$("#content").hide(); //on cache le contenu
$("body").append('<div id="wait"><img src="../../img/loader.gif" alt="chargement..."/></div>');
});
// Utilisation du carousel
$(window).load(function(){
$("#wait").hide();
$("#content").fadeIn(1500);
$("div.foo").carousel({ dispItems: 2, nextBtn: '<img src="../../img/next.png" alt="next" />', prevBtn: '<img src="../../img/previous.png" alt="next" />' });
}); |
Merci d'avance, je bloque depuis pas mal de temps sur ce problème...
