2010-06-14 9 views
2

J'ai un élément div avec quelques images formatées. Sur demande de l'utilisateur, je charger des images supplémentaires de manière asynchrone, sans postback, et ajouter le résultat (HTML formaté pour de nouvelles images) à l'élément div en utilisant JavaScript:Ajout à InnerHtml sans reste de contenu

function onRequestComplete(result) { 
     var images = document.getElementById('images'); 
     images.InnerHtml += result; 
    } 

Tout va bien, sauf la partie lorsque les images dans le panneau chargé précédemment scintillement après l'ajout du code HTML. Si je comprends bien, le panneau est reconstruit, pas seulement le nouveau HTML est ajouté à son fond. Ce n'est donc pas un comportement Web 2.0.

Comment cela peut-il être fait sans effleurer? Merci d'avance.

+0

Quel navigateur? Cela arrive-t-il aussi dans d'autres navigateurs? – Seth

+0

Initialement, j'ai ce problème dans IE 8 à chaque fois. Maintenant, j'ai vérifié ce problème avec d'autres navigateurs. Dans Google Chrome, le scintillement se produit la première fois seulement (sur le premier ajout), tous les ajouts suivants sont corrects, sans scintillement. Dans Firefox, tout est excellent, pas de scintillement. – Centro

Répondre

1

Utilisez la méthode dom d'entre eux ajoutant:

var div = document.createElement('div'); 
div.innerHTML= result; 
document.getElementById('images').appendChild(div); 

Ou si vous voulez vraiment faire de la bonne façon, créer un élément de dom pour chaque image, puis de les ajouter. Cela a également l'avantage de précharger les images.

Ou utilisez simplement jQuery. ;)

+0

Cela a fonctionné :), merci, juste une petite correction: une seule des variables ci-dessus (span ou div) doit être utilisé. Sûrement c'est juste un faux-nom, juste pour ceux qui comme moi les débutants en javascript ne pas simplement copier-coller ce code;). Et, bien sûr, je jetterai un coup d'oeil dans jQuery, parce que parfois JavaScript me rend fou. – Centro

+0

Désolé à ce sujet, à l'origine, j'ai utilisé un 'span' pour contenir le contenu, puis j'ai décidé qu'un' div' serait plus correct. (Le commentaire de jQuery faisait référence au fait que "use jQuery" est la solution donnée pour 90% des questions de JS.) –

1

En utilisant l'opérateur + = est le même que:

images.innerHTML = images.innerHTML + result; 

qui va réengendrer tout votre récipient, provoquant ainsi « vacillante ».

Vous devriez pouvoir avoir le même résultat en ajoutant de nouveaux éléments au conteneur, sans avoir le scintillement. Pour cela, vous aurez besoin des méthodes createElement et appendChild.

HTH!

+0

Maintenant, je vois. Je pensais juste que les navigateurs modernes sont assez "intelligents" pour gérer cette situation. Comme Firefox dans lequel cela fonctionne sans scintillement. – Centro

+0

Quelqu'un downvoted moi dans cette réponse et je voudrais savoir pourquoi; (. – wtaniguchi

0

Lorsque vous ajoutez votre contenu, vous pouvez virer de bord sur quelque chose comme

<span class='endMarker'></span> 

Alors, au lieu de mettre à jour juste « innerHTML » comme ça, vous auriez l'air à travers le DOM dans la cible, trouver la dernière <span> avec class "endMarker", puis ajouter du nouveau contenu après cela. Sans vouloir être un "utilisateur de problèmes résolus", je dirai qu'une bibliothèque comme celle-là rendrait les choses un peu plus faciles. Pour ajouter le contenu, vous pouvez le déposer dans un div masqué, puis le déplacer.

0

Faites de toutes les images une seule image, puis utilisez le positionnement CSS pour afficher la section souhaitée. Le scintillement est dû au chargement des nouvelles images.