2010-10-04 3 views
2

1) Je dois changer les images dynamiquement en fonction des valeurs pour toutes les x secondes.Actualisation partielle de la page pour X secondes avec Jquery et Ajax?

J'utilise la fonction suivante:

setInterval(function() { 
    $("#content").load(location.href+" #content>*",""); 
}, 5000); 

Il fonctionne très bien pour la mise à jour de la valeur, mais les images ne se mis à jour dans sa position.

2) A partir de la 1ère question je veux savoir si les fichiers jquery et css inclus dans le tag head seront chargés toutes les x secondes ou non. sinon comment charger?

S'il vous plaît donnez-moi la suggestion.

Répondre

0

Si vous renvoyez une page HTML entière et la renvoyez dans le corps d'une autre page, c'est une mauvaise idée.

y pense, votre structure HTML serait quelque chose comme

<doc type> 
<html> 
    <head> 
    </head> 
    <body> 
    <div> 
     <doc type> 
     <html> 
     <head> 
     </head> 
     <body> 
      <div> 

      </div> 
     </body> 
     </html> 
    </div> 
    </body> 
</html> 

Idéalement, vous devriez être Refaire seulement le contenu qui doit être affiché, pas tout.

Si vous mettez à jour des images, il n'est généralement pas nécessaire d'effectuer un appel XHR. Vous pouvez simplement définir l'image src et forcer le navigateur à mettre à jour ce contenu de cette façon.

0

Est-ce que cela doit être fait avec Ajax? Combien d'images allez-vous parcourir? Si ce n'est que quelques-uns, gardez tous les src sur la page et basculez l'attribut src image périodiquement. Cela ne nécessite aucun rechargement de page. Vous pouvez également précharger toutes les images afin qu'il n'y ait pas de scintillement lors du passage à l'autre image. Par exemple:

$(function() { 
    var images = ['1.png', '2.png', '3.png']; 
    $.each(images, function (index, src) { 
     $("<img />").attr('src', src); //preload 
    }); 
    var keep = 1; 
    setInterval(function() { 
     $("#main_img").attr('src', images[keep]); 
     keep++; 
     if (keep >= images.length) { keep = 0; } 
    }, 5000); 
}); 

Maintenant, si vous ne voulez pas coder en dur l'image urls dans la JS, vous pouvez les charger d'abord avec une seule requête Ajax.

Je recommanderais seulement d'utiliser Ajax pour faire tout le travail si vous parlez d'un ensemble imprévisible d'images ou d'un grand nombre d'images.

Questions connexes