Charger les images du navigateur avec un événement javascript?

Question

J'ai une page contenant beaucoup d'images, qui sont initialement cachées à la vue car j'utilise des divs à onglets (c.-à-d. Cacher certaines divs en utilisant l'affichage CSS: aucun). Par conséquent, lorsque la page est chargée, le chargement de toutes les images prend un certain temps, ce qui donne l'impression que la page est lente (car la barre de chargement du navigateur ne se termine pas pendant plus de 10 secondes).

Je voudrais une façon de ne pas charger les images jusqu'à ce qu'elles soient visibles sur la page.

Je ai joué avec jQuery LazyLoad, mais cela ne semble que charger des images lors du défilement du navigateur (ce qui ne fonctionne pas pour les divs à onglets).

Par conséquent, existe-t-il un moyen de changer LazyLoad pour fonctionner comme ceci, ou y a-t-il une meilleure manière de faire ceci?

Merci!

Answer 1

Je ne le savait pas déjà, mais LazyLoad pris en charge par le déclenchement d'événements:

http://www.appelsiini.net/projects/lazyload

Si quelqu'un a besoin d'une main sur la façon dont je l'ai fait, laissez-moi savoir!

Answer 2

Peut-être que jQuery Tabs pourrait faire ce que vous avez besoin, avec appel ajax sur les onglets ...

Comment afficher vos divs cachés?

Answer 3

Un plan d'attaque:

Au lieu de mettre l'URL de l'image dans l'attribut src de la balise img, mettre un autre (par exemple une durée cachée avec une classe particulière au-dessus) et en montrant la div, parcourez toutes les balises img et réglez le src sur l'URL qu'il aurait dû avoir.

En tant que méthode, il y a certainement des inconvénients.

Answer 4

J'ai essayé cela récemment et je dois dire que ce n'est plus possible avec js. Peut-être que ça n'a jamais été ... Des projets comme lazyload ont toujours proclamé qu'ils empêcheraient le chargement de toutes les images au démarrage, mais vous pouvez voir dans firebug que cela ne fonctionne pas. Les images sont même chargées deux fois, sur domready et quand vous commencez à faire défiler ...

Votre seul choix serait ajax sur la main ou sur faire quelque chose comme ceci:

<img src="transparent.gif" alt="" rel="real image source" /> 

puis passer les attributs lorsque les Les divs deviennent visibles, donc l'image commence à charger.

Cela fonctionne bien aussi bien si vous n'avez pas besoin de les indexer.

Espérons que ça aide! :)

Edit: Hm, pourquoi ai-je obtenu un -1 alors que je donnais juste une réponse? Jetez un oeil aux pages avec lazyload et activez firebug puis faites défiler la page. On a même dit ici sur stackoverflow et dans les commentaires pour le plugin lazyload que c'est la seule solution pour le moment ...:(

Answer 5

Si vous utilisez (ou pouvez utiliser) le doctype HTML5, vous pouvez utiliser le préfixe « Data- » pour les attributs tag:

<img src="" data-src="/path/to/image" style="display: none" /> 

Et vous pouvez alors utiliser Javascript pour remplir le src avec les données-src:

$(SELECTOR).attr("src", $(SELECTOR).attr("data-src")); 

Answer 6

Si votre seul but est de « cacher » la barre de progression qui est si long en raison du grand nombre d'images, j'aller pour une sorte de solution AJAX, depuis De cette façon, la barre de progression n'est pas utilisée, elle introduit plus de complexité dans la façon dont vous voulez charger vos éléments HTML (et possibl y quand). Personnellement, je n'aime pas utiliser les attributs HTML pour autre chose que leur fonction d'origine, donc stocker le chemin dans un autre attribut et passer au besoin ne serait pas ma première option. Au lieu de cela, j'essaierais de créer un tableau JavaScript (id => path) et de mettre à jour les éléments HTML IMG séparés si nécessaire.

Bonne chance! ;)