Comment montrer l'image de chargement lorsqu'une grande image est chargée?
Par exemple à Orkut lors de la visualisation d'une photo dans l'album photo utilisateur, une image de chargement est affichée sur la photo jusqu'à ce que la photo soit complètement chargée.
Je dois mettre en œuvre cette fonctionnalité.
Ma question est de savoir comment implémenter cette fonctionnalité? Est-il possible sans utiliser jQuery?
aide s'il vous plaît.
5 Réponses :
Enveloppez votre image dans une DIV (ou tout ce que vous voulez) et définissez l'image d'arrière-plan pour être un gif animé ou quelle que soit l'image de chargement que vous souhaitez. Lorsque l'image finit le chargement, il recouvrira l'image d'arrière-plan. Facile et peut être réutilisé où que vous souhaitiez.
.loading{
background:transparent url(loadinggif.gif) center center no-repeat;
}
Le wrapper div n'est pas nécessaire. Vous pouvez appliquer l'arrière-plan à l'image. En outre, si l'image est transparente, l'image de chargement sera visible en dessous.
Y a-t-il un autre moyen d'utiliser ASP.NET AJAX ou JavaScript simple à JQuery. S'il vous plaît aider. Merci pour votre réponse.
@HIMADRI - Pourquoi voulez-vous le rendre plus compliqué?
Justin - vous êtes correct, ce n'est pas nécessaire. Je voulais juste donner un exemple simple.
@HIMADRI: L'approche utilise ici Pure CSS que vous pouvez inclure sur la page. Vous pouvez même ajouter ces règles de style directement à l'objet image (bien que je recommande d'utiliser une approche ci-dessus à la place): 
Vous pouvez faire cela en utilisant JavaScript avec ou sans jQuery ... mais à moins que vous soyez une raison convaincante, je voudrais probablement utiliser quelque chose de similaire à cette réponse.
Vous pouvez utiliser le Plugin de chargement de JQuery paresseux . Il vous permet de spécifier une image de chargement et de retarder le chargement de grandes images jusqu'à ce qu'ils soient défilés en vue.
Y a-t-il un autre moyen d'utiliser ASP.NET AJAX ou JavaScript au lieu de JQuery? Merci pour votre post.
edit: strong> apparemment, cela a été obsolète. Rien de voir ici, déplacez-vous. Aucun JavaScript ou CSS n'est nécessaire pour cela. Utilisez simplement l'intégré, mais rarement entendu - de,
LOWSRC code> Propriété pour IMG code> Eléments. P> <img src="giant-image.jpg" lowsrc="giant-image-lowsrc.gif">
J'ai été fasciné par cette réponse depuis que je n'ai jamais entendu parler de la propriété "LOWSRC" avant. J'ai fait une recherche sur Google et je suis tombé sur ceci: blog.throbs.net/2009/05/27/hey+jlo+where+did+lowsrc+go.aspx Il semble indiquer que" lowsrc "est obsolète pendant un moment. Les seules sources / pages que j'ai trouvées pour 'lowsrc' sont très très anciennes. Je n'ai pas non plus capable d'utiliser les pages à tester (et de voir en réalité le LOWSRC en action). Peut-être que ma connexion est trop rapide.
De ma recherche en ligne, il semble que cette propriété puisse être piratée en utilisant JavaScript. Si vous exécutez Source HTML avec l'attribut LOWSRC Image via validator.w3.org Il montrera que "lowrc" est pas un attribut valide.
Bien me couper. Je ne l'ai jamais utilisé moi-même, j'en ai entendu parler.
J'ai eu l'erreur HTML 'lowsrc' n'est pas un attribut valide de l'élément 'img' et ne peut voir aucune différence en l'utilisant.
@HIMADRI YA, c'est ce que @jim a dit
Dommage que cela soit obsolète, ce serait une solution simple pour quelque chose qui est parfois encore nécessaire.
Voici une technique de base que vous pouvez développer pour faire plus de choses élaborées avec
Réponse Vaut définitivement la Bounty. Fonctionne et bien expliqué.
Il y a longtemps, j'ai fait quelque chose comme ça pour un problème similaire: Je pense que cette approche présente des avantages utiles: