Charger des images navigateur avec l'événement javascript?

Question

J'ai une page contenant un grand nombre d'images, qui sont d'abord cachés de la vue que j'utilise divs onglets (c.-à cacher certains divs utilisant CSS display. None).

Par conséquent, quand puis chargement de la page, il faut les âges pour charger toutes les images, qui ressemble à la page est lent (comme la barre de chargement sur le navigateur ne se termine pas pour 10+ secondes).

Je voudrais une façon de ne pas le chargement d'images jusqu'à ce qu'ils soient visibles sur la page.

Je l'ai joué avec jQuery LazyLoad , mais cela ne semble que les images de charge lorsque défilement du navigateur (qui ne fonctionne pas pour divs séparés par des onglets).

Par conséquent, est-il un moyen de changer LazyLoad au travail comme celui-ci, ou est-il une meilleure façon de le faire?

Merci!

Answer 1

Je ne connaissait pas ce auparavant, 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 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, itérer à travers toutes les balises img et définissez le src à l'URL, il aurait dû.

En tant que méthode, il est sans aucun doute a quelques inconvénients.

Answer 4

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

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

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

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

Answer 5

Si votre seul but est de « cacher » la barre de progression qui est si long en raison du grand nombre d'images, je vais pour une sorte de solution AJAX, car cette façon la barre de progression est pas « utilisé » . Il ne présente plus de complexité dans la façon dont vous voulez charger vos éléments HTML (et éventuellement quand).

Personnellement, je n'attribue pas comme en HTML pour autre chose que leur objectif initial, donc stocker le chemin dans un autre attribut et la commutation en cas de besoin ne serait pas ma première option. Au lieu de cela, je vais essayer de créer un tableau JavaScript (id => chemin) et mettre à jour les éléments HTML IMG séparés en cas de besoin.

Bonne chance! ;)

Answer 6

J'ai essayé que ces derniers temps et je dois dire que cela est impossible avec js plus. Peut-être qu'il n'a jamais été ... Des projets comme lazyload ont toujours proclamé qu'ils cesseraient toutes les images du chargement 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 le défilement ...

Vos seuls choix serait ajax sur la main ou sur faire quelque chose comme ceci:

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

et puis passer les attributs lorsque les divs deviennent visibles, afin que l'image commence le chargement.

Cela fonctionne bien aussi bien au moins si vous n'avez pas besoin google les indexer.

L'espoir qui aide! :)

Edit: Hm, pourquoi ai-je -1 quand j'étais juste givin une réponse? Il suffit de jeter un oeil aux pages avec lazyload et activer Firebug et puis faites défiler la page. Il a même été dit ici sur stackoverflow et dans les commentaires pour le plugin lazyload que c'est la seule solution pour le moment ...: (