Forcer les fichiers javascript externes (de Digg, Reddit) à se charger en dernier.

Question

Je travaille sur un site WordPress qui a deux fichiers javascript externes qui se chargent à peu près à la moitié de la page. Ces fichiers sont des badges de Reddit et de Digg, et ajoutent souvent 4 à 8 secondes au temps de chargement total de la page - tout en empêchant également le chargement de la moitié inférieure de la page.

Les javascripts de Digg et de Reddit rendent un <iframe> (qui, je suppose, doit se charger complètement avant que le reste de l'application mon la page web est chargée), et ajoute donc une grande quantité de temps de chargement supplémentaire.

J'ai essayé de déplacer le <script> en bas de la page, juste avant les balises </body> mais les badges s'affichent juste en dessous du pied de page au lieu d'être là où ils devraient être.

Comment puis-je forcer ces deux fichiers javascript externes à se charger en dernier, tout en assurant le rendu là où il le faut ?

Answer 1

Vous pouvez créer une div ["divA"] à l'endroit où vous souhaitez placer vos iframes Digg/Reddit [il s'agit donc d'un simple emplacement]. Lorsque la page a fini de se charger, ajoutez un élément "script" à head pour que les script de Digg/Reddit puissent se charger. Lorsqu'ils ont fini de se charger, vous pouvez les déplacer de body à divA.

document.body.removeChild(iframe);
document.body.getElementById("divA").appendChild(iframe);

Answer 2

L'endroit où vous rendez les balises script ne devrait pas nécessairement impliquer l'endroit où l'UI que ces script génèrent apparaît-- qu'il le fasse semble un gaffeur ou une conception douteuse. Est-ce que les script ont des fonctions connues en eux qui vous permettent de leur donner un div conteneur ou quelque chose dans lequel rendre leur UI ?

Vous avez raison, bien sûr, de les charger en dernier, avant de </body> . C'est la bonne stratégie.

Answer 3

La réponse rapide est la suivante : il n'y a pas de solution simple. Si vous utilisez defer="true" sur les balises script, et qu'elles utilisent document.write, le contenu sera toujours écrit là où il se trouvait lors du chargement et non pas là où la balise script a été insérée.

Certaines des réponses à cette question pourraient vous aider : Comment arrêter le rechargement d'une IFrame lorsque je change sa position dans le DOM ?

Certaines des autres réponses dans ce fil suggèrent de supprimer l'iframe et de le réinsérer. Cependant, cela vous mènera directement au problème de la question ci-dessus : le contenu de l'iframe se chargera deux fois.

L'approche générale consiste à placer un espace réservé à l'endroit où vous voulez les placer, puis à les déplacer dans cet espace lorsqu'ils sont prêts.