2010-11-26 6 views
0

J'ai développé un site JS-lourd en utilisant la librairie Mootools et j'ai rencontré des difficultés sur la route. Il y a un div qui défile sur la page qui contient plus de 500 images et j'essaye d'implémenter une fonction de chargement par le bas ainsi la page ne charge pas toutes les images de plus de 500 à la fois. J'ai trouvé David Walsh's lazyload class mais cela ne fonctionne pas dans les navigateurs webkit (il dit que c'est à cause de WebKit bug #6656). J'ai aussi trouvé this class et semble pour fonctionner mais pas vraiment. Il charge toujours toutes les images sur la page mais masque les images en dehors de la fenêtre et les masque lorsque vous les faites défiler dans la vue.Mootools et Lazyload

Il semble y avoir un certain nombre de classes lazyload jQuery qui fonctionnent très bien (dans tous les navigateurs), mais je suis déjà semaines dans le développement de ce site et ne peut pas vraiment justifier de commutation pour cela ou à l'aide de deux bibliothèques. Quelqu'un sait-il s'il existe une classe Mootools parzyload qui fonctionne dans les navigateurs WebKit? Si non, avez-vous des recommandations? Dois-je utiliser jQuery avec Mootools?

Ce problème ralentit un peu le développement.

+0

lazyload ne fonctionnera pas sur les navigateurs utilisant Webkit à cause du bogue mentionné ci-dessus. S'il vous plaît me prouver le contraire et montrer un plugin jQuery qui fonctionne réellement autour du bug - Je suis vraiment curieux de savoir si/comment ils ont créé une solution de contournement. –

+1

En outre, vous dites que le site sur lequel vous travaillez est lourd, je suppose qu'il ne devrait pas se dégrader gracieusement en mode non-JS. Dans ce cas, je peux suggérer d'utiliser les attributs 'data- *' de (X) HTML5. Vous créez essentiellement '' et chargez paresseux les fichiers de cet attribut personnalisé, pas le 'src'. –

+0

Je considère ma propre solution de contournement/hack où je charge simplement un blank.gif par défaut et stocke l'image réelle dans un attribut rel = "". –

Répondre

2

Vous pouvez envelopper les images à l'intérieur d'une balise noscript. Les navigateurs ne chargeront pas les images à l'intérieur si vous avez activé Javascript. La bonne chose à ce sujet est qu'il se dégrade bien pour les navigateurs non-JS. Je décris plus en détail ici:

http://experimentsbykevin.tumblr.com/post/754769738/lazy-image-loading

+0

Oh, intéressant! Merci pour le conseil. Très utile. –