Chargement saccadé avec Ajax

**elfamine** · 22/10/2013, 15h31

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

**SpaceFrog** · 22/10/2013, 15h52

tu charges du code html ...

les images référencées dans le html ne sont pas chargées ...

Tu peux éventuellement coller el code html dans une balise non visible et tester l'etat de chargement des images (complete)
une fois toutes les images chargées tu rend la zone visible ...

Ou parser le source retourné pour en récupérer les src d'images et faire un preloader d'images sur le quel tu teste les complete avant d'afficher le code html chargé

**elfamine** · 22/10/2013, 16h10

Je n'ai pas une template unique pour générer l'html en javascript, pour éviter des if en cascade j'ai préféré générer l'html en php, le stocker sur mysql.. ceci dit est ce que tu pense que ca a un impact sur les performance ? j'aurais un affichage plus rapide ?

Ce n'est pas que des image mais aussi du javascript...

Je commencerais par les images donc, j'imagine que c'est avec la fonction load() c'est ca ?