Vérification Soutien image du navigateur pour un remplacement de texte d’application dynamique JavaScript

Présentation

Bienvenue dans le didacticiel finale de la série qui a commencé avec «Remplacement de texte dynamique avec JavaScript. » Comme il est décrit dans le paragraphe introductif, cette série vous offre un sympathique guide sur la façon de développer une application de remplacement de texte avec l’aide de JavaScript. Vous pouvez facilement adapter cette application pour répondre aux exigences de vos projets web en particulier.

Si vous avez lu les deux articles précédents de cette série, alors que vous avez appris les bases pour utiliser l’approche de remplacement de texte. Dans ces articles, j’ai démontré comment mettre en œuvre l’approche de substituer les nœuds de texte inclus dans toutes les têtes <h2> d’une page web de l’échantillon avec quelques images simples.

Indépendamment de la simplicité de ces exemples pratiques, ils ne montrent en quelques mots le potentiel remarquable pour l’utilisation de remplacements de texte. Ils sont particulièrement utiles lorsque vous souhaitez ou avez besoin d’utiliser des polices de caractères spéciaux dans les sections rubrique de votre site web, et vous cherchez un moyen d’étendre au-delà ceux intégrés par défaut sur de nombreux navigateurs modernes.

Maintenant que vous êtes très familier avec, espérons utilisant l’approche de remplacement de texte dans vos propres pages web, laissez-moi vous offrir une introduction rapide aux thèmes que j’ai l’intention de couvrir dans cette dernière partie de la série. Cela vous aidera à visualiser la façon dont ce dernier versement des liens avec les autres.

Puisque dans l’article précédent je vous ai déjà montré comment modifier l’application texte original de remplacement pour le rendre apte à l’utiliser avec n’importe quel élément de la page web, dans ce dernier chapitre je vais intégrer certaines améliorations supplémentaires à l’application. Plus précisément, je vais lui donner la capacité de vérifier si oui ou non le navigateur dans lequel le processus de remplacement du texte aura lieu supporte les images.

Bien que cette petite modification peut paraître insignifiant, il contribuera à rendre l’application du texte de remplacement l’ensemble un peu plus robuste et professionnelle. Ainsi, après avoir introduit le sujet de cette dernière partie de la série, il est temps de voir comment ajouter le support d’image vérification pour le script de remplacement de texte que vous avez appris dans l’article précédent.

Etes-vous prêt à voir comment cet objectif sera atteint? Commencez à lire dès maintenant!

Examen de l’application du texte précédent de remplacement

Dans mes articles sur le développement web, je tiens à réintroduire le code source original de la demande avant d’appliquer les modifications à lui. Par conséquent, j’ai énuméré ci-dessous le code source complet de cette application de remplacement de texte tel qu’il a été développé pendant le précédent article de la série.

Voici l’exemple de code correspondant:

Comme indiqué précédemment, le plus haut (X) fichier HTML en oeuvre de façon simple l’approche de remplacement de texte. Bien sûr, comme vous pouvez le voir, dans ce cas, les nœuds de texte respectifs de tous les en-têtes <h2> contenues dans le document Web avant seront remplacés par des images de base, mais depuis la définition du pertinente « replaceTextNodes () « fonction JavaScript est très flexible, il est parfaitement possible de mettre en œuvre le remplacement par d’autres éléments de page Web. Assez facile à comprendre, non?

Jusqu’ici, tout va bien. A ce stade, je suis assez sûr que l’utilisation de l’approche texte de remplacement est déjà un processus familier pour vous. Par conséquent, dans la section suivante, je vais vous montrer comment modifier la signature de la précédente « replaceTextNodes () » fonction JavaScript afin qu’il puisse vérifier par programme si le navigateur dans lequel le texte de remplacement aura lieu a le soutien approprié pour les images.

Pour voir comment cette modification sera faite, s’il vous plaît cliquer sur le lien ci-dessous et continuez à lire.

Support de l’image Ajout vérifiant

Comme vous le savez sûrement, il ya plusieurs façons de déterminer si oui ou non un navigateur spécifique a le soutien pour les images. Les solutions à ce problème peut varier de l’aide de simples extraits de code JavaScript à mettre en œuvre plus complexe hacks CSS.

Dans ce cas, cependant, je vais utiliser une technique soignée et efficace développé à l’origine par Peter-Paul Koch (vous pouvez lire plus sur cette technique ici) pour fournir le script précédent texte de remplacement à la capacité de vérifier le navigateur pour le soutien de l’image.

Après avoir clarifié ce point, voici comment le script texte amélioré de remplacement ressemble maintenant:

Comme vous pouvez le voir, ci-dessus »replaceTextNodes () » de fonction a la capacité de déterminer si oui ou non le navigateur supporte les images via l’utilisation d’un petit X 1px 1px image transparente appelée « test.gif. » Réussie chargement de l’image du texte incendies jusqu’à l’exécution du reste du script de remplacement de texte. Sinon, la fonction ne pourront tout simplement ne rien faire.

En outre, la fonction modifiée pourrait être déclenché après la page web a été chargé, de la façon suivante:

En fait, la modification que j’ai faite à la fonction précédente JavaScript est totalement facultative, mais elle ne fait pas mal d’ajouter un certain soutien vérification de l’image des capacités. Bien sûr, la décision finale concernant l’inclusion de cette amélioration est entièrement à vous.

Eh bien, à ce stade je devrais supposer que vous avez déjà saisi la technique pour déterminer si oui ou non un soutien pour des images a été activé sur le navigateur. Alors il est temps d’inclure l’amélioration des « replaceTextNodes () » fonction JavaScript dans la même (X) fichier HTML qui contient le balisage structurel et les styles CSS de la page Web de l’échantillon que vous avez vu auparavant.

Dans la section suivante, je vais vous montrer le code source complet de la demande de remplacement de texte. Il sera ainsi plus facile de le mettre dans un seul fichier source. Vous aurez également un temps plus facile tester le code source et l’analyser pour faire vos propres modifications. Alors s’il vous plaît, cliquez sur le lien qui apparaît ci-dessous et lire la dernière section de ce tutoriel.

Remplir la demande de remplacement du texte: le code source

Comme je l’ai exprimé dans la section précédente, la meilleure façon d’étudier et de tester cette application le texte de remplacement est de mettre tous ses différents modules en un seul fichier. Cela vous permettra de facilement copier et coller son code source dans votre éditeur favori pour une analyse ultérieure.

Cela dit, voici toute l’application:

Il vous en avez. Le code source ci-dessus est tout le matériel que vous avez besoin pour commencer à appliquer cette technique de remplacement de texte puissant, et bien sûr, vous avez l’entière liberté de modifier son code source et introduire vos propres modifications.

Dernières pensées

Enfin, nous sommes arrivés à la fin de cette série. Bien sûr, je voudrais donner le crédit correspondant à Peter Paul Koch pour le développement du script texte original de remplacement, que j’ai utilisé ici comme un point de départ pour créer de nombreux exemples pratiques sur la voir dans ce tutoriel. J’espère vous avez appris les notions clés pour l’utilisation de cette technique, qui peut être vraiment utile si vous voulez faire vos pages Web beaucoup plus attrayant pour les visiteurs potentiels.

Rendez-vous dans le tutoriel de développement web prochain!