Informations «Lazyloading» à partir d'une base de données sur une page PHP dans la procédure

Question

Je sais que le chargement paresseux approprié nécessite généralement l'utilisation d'objets et un motif proxy. Je ne suis pas encore là car un site a besoin d'une refonte. Cependant, y a-t-il un moyen de réaliser des données DB sur une page et d'accélérer un peu de temps?

Answer 1

Cela peut être réalisé avec Ajax.

Lorsque vous chargez une page pour la première fois, mettez des détenteurs de lieux où le contenu lourd est censé aller. Par exemple, utilisez un div Avec un style distinctif et une image de chargement animée à l'intérieur afin que les visiteurs puissent clairement dire qu'il y a plus de chargement. Vous pouvez générer des images de chargement de l'Ajax à l'aspect familier sur ajaxload.info.

Ayez un script au bas de votre page qui appelle ou lie les fonctions nécessaires pour charger le contenu supplémentaire à l'aide d'Ajax. Vous pouvez lier l'appel ajax à JQuery .ready() par exemple pour que le chargement commence dès que le reste du document est prêt ou .scroll() Pour commencer lorsque l'utilisateur défile sur un certain élément (par exemple, certains «repères» sur votre page séparent des blocs de contenu).

Lorsque vous recevez la réponse AJAX qui contient le contenu supplémentaire (de préférence pré-formaté sous forme de HTML sous forme de chaîne), remplacez le contenu de l'espace réservé div avec la réponse Ajax en utilisant .innerHTML = ou jQuery .html(). Changer le style du div Si nécessaire en utilisant setAttribute("class","newClass") ou jQuery .attr("class","value") Pour remplacer sa classe CSS.

Le visiteur pourra voir votre pleine page et le faire défiler pendant que le chargement a lieu. Le contenu supplémentaire apparaîtra lorsqu'il sera prêt sans interrompre l'expérience de navigation du visiteur. Vous pouvez le rendre un peu plus agréable pour l'œil en animant les transitions après l'injection de contenu.

Si vous avez besoin de quelques exemples supplémentaires sur la façon d'utiliser l'Ajax pour récupérer le contenu de manière asynchrone, jetez un œil à ces pour l'approche JavaScript classique ou jQuery .ajax () docs.

Answer 2

Vous pouvez utiliser JavaScript pour commencer à charger des données supplémentaires dès que la page principale se charge. De cette façon, votre page principale peut simplement décrire les composants de la page, présenter des "filateurs" indiquant que davantage de données sont chargées, puis les décharger en JavaScript pour obtenir plus de données.