Discussion :

[adidas40]

Bonjour à tous,

Voilà j'ai fait un "module" d'images aléatoires qui changent toutes les X secondes. Tout fonctionne bien pendant quelques minutes et au bout d'un moment le navigateur freeze complètement (que ce soit FF ou IE c'est pareil).
Je n'arrive pas à cibler le problème, donc je vous mets tout le code de la page en question :

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
<?php
// texts
$random_picture_text = array('fr' => array('title' => 'Photo aléatoire',
                                           'refresh_error' => 'Erreur lors du chargement de la nouvelle photo'),
                             'en' => array('title' => 'Random picture',
                                           'refresh_error' => 'Error during loading the new picture'));
 
// calling files if needed (Request.HTML)
if (!class_exists("SQL")) {
  require '../../../config.inc.php';
  require '../../../libs/sql.class.php';
  $db = new SQL();
}
 
class Random_Picture {
 
  // building bloc
  function displayBloc() {
  
    // recover vars
    global $smarty, $random_picture_text;
 
    // define folder of templates
    $smarty->template_dir = 'modules/blocs/templates'; 
 
    // pre-module var
    $smarty->assign('module', 'random_picture');
 
    // assign all vars from selected language
    foreach ($random_picture_text[USER_LANG] as $k => $v) {
      $smarty->assign($k, $v);
    }
 
?>
<script type="text/javascript">
var ref = new Request.HTML({url: 'modules/blocs/random_picture/index.php',
                            method: 'get',
                            onSuccess: function(html) {
                              $$('#random_picture .content').adopt(html);
                            },
                            onFailure: function() {
                              $$('#random_picture .content').set('text', '<?php echo $random_picture_text[USER_LANG]['refresh_error']; ?>');
                            }
                           });
 
function rpic_refresh() {
  $$('#random_picture .content').set('text', '');
  ref.send('refresh=true');
  setInterval('rpic_refresh()',10000);
}
rpic_refresh();
</script>
 
<?php
 
    // display empty bloc
    $smarty->display('bloc_header.tpl');
    $smarty->display('bloc_footer.tpl');
  }
  
  // display the picture
  function displayPicture() {
 
    global $random_picture_text, $db;
 
    // sql request for a random picture
    $data = $db->sql_req(1, 'rp_id, rp_urlsmall', 'random_picture', 'ORDER BY RAND() LIMIT 1');
 
    // HTML Code
?>
<img src="<?php echo $data['rp_urlsmall']; ?>" alt="<?php echo $data['rp_urlsmall']; ?>" border="0" class="random_picture" />
<?php
  }
}
 
// calling the class
$rp = new Random_Picture();
 
// if it's a refresh
if (isset($_GET['refresh'])) {
  $rp->displayPicture(); // we change the picture
}
// else, if smarty if ok
elseif (isset($smarty)) {
  $rp->displayBloc(); // we display the bloc for random picture
}
?>

Je vous explique brièvement l'utilité de cette classe (c'est pas toujours évident de comprendre un code qu'on n'a pas écrit soit même ^^).
Donc en fait j'appelle une première fois la classe Random_Picture->displayBloc(); à partir de mon index.php, et la classe Random_Picture, ou plutôt la requête AJAX intégrée dedans va se rappeler toute seule toutes les X secondes et utiliser la fonction displayPicture();

[Nighty]

M'est avis que tu devrais plutôt mettre ton timeout dans un évènement onComplete de ta requête, ainsi tu es sûr qu'une requête ne sera pas envoyée alors que la précédente n'a pas encore répondue... Ce qui peut arriver si les images sont vraiment lourdes.

Pas dit que ça corrige le problème mais ça sera à mon avis déjà "plus sain" comme fonctionnement.

Et n'oublie pas aussi que Mootools fournis plein d'outils qui remplacent les fonctions de base javascript... Tu y gagnerais à utiliser la méthode delay que mootools rajoute aux fonctions plutôt que setInterval.

Espérant de mettre un peu dans la direction faute de plus de temps

[adidas40]

Tout à l'air de fonctionner parfaitement maintenant.
Un grand merci à toi Nighty ;-)

Pour ceux qui auraient eu le même problème, voici donc la solution :

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
<script type="text/javascript">
var ref = new Request.HTML({url: 'modules/blocs/random_picture/index.php',
                            method: 'get',
                            onSuccess: function(html) {
                              $$('#random_picture .content').set('text', '');
                              $$('#random_picture .content').adopt(html);
                            },
                            onFailure: function() {
                              $$('#random_picture .content').set('text', '');
                              $$('#random_picture .content').set('text', '<?php echo $random_picture_text[USER_LANG]['refresh_error']; ?>');
                            },
                            onComplete: function() {
                              rpic_picture.delay(10000);
                            }
                           }).send('refresh=true');
function rpic_picture() {
  ref.send('refresh=true');
}
</script>