Est ce qu'il y a moyen de tester si un contenu html généré dynamiquement par ajax est correctement chargé avant de l'afficher ?
Je précise que le contenu html en question est plus tot riche; il y a parfois des images assez gourmande mais surtout les boutons share/like qui utilise du javascript (genre le like de facebook et ceux de twitter).
Code javascript : 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 function getposts() { if (!posttypes) { $('#notif-feed').show().html('sélectionner au moins une option'); } else { $.ajax({ type: 'GET', url: '/fn/getposts.php', data: { start: start, t: posttypes, tag: hashtag }, beforeSend: function () { $('#notif-load').show(); }, success: function (data) { $('#notif-feed,#notif-load').hide().empty(); //post counter var cposts = 0; for (post in data) { //data[post] le contenu php encapsulé dans un tag article avec un display:none dans le css $('.main-content').append(data[post]); cposts++; } if (cposts <= 9) { $('.next').hide(); } else { $('.next').show(); } start = start + 10; //une fonction qui charge les boutons de partage loadbuttons(); }, complete: function () { //Ici j'aimerais faire un fadeTo('slow') apres avoir testé si l'html est chargé }, error: function () { $('#notif-feed').show().html('erreur lors de la récuperation du feed depuis le serveur'); } }); } } //Load Facebook and twitter buttons function loadbuttons(){ twttr.widgets.load(); FB.XFBML.parse(); }
data[post] généralement contient ceci :
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 <article id="id-unique" class="item"> <div class="item-header"> <div class="item-header-icone type"><a href="url" target="_blank">Open</a> </div> <div class="item-header-bar"></div> </div> <img class="item-img" src="url"> <ul class="item-block-list"> <li> <div class="text"> <p>Text ici</p> </div> </li> <li class="like-box"> <div class="fb-like" data-href="" data-width="450" data-layout="button_count" data-show-faces="true" data-send="true" data-colorscheme="dark"></div> <div class="t-tweet"><a href="" class="twitter-share-button" data-url="" data-via="nom" data-lang="fr" data-text="message">Tweeter</a> </div> </li> </ul> </article>
Merci d'avance pour vos conseils ou vos solutions
Partager