2010-11-26 17 views
0

私はMootoolsライブラリを使用してJS-heavyサイトを開発しました。 500以上の画像が含まれているページにスクロールしているdivがあり、ページに500以上の画像が一度に読み込まれないようにlazyload機能を実装しようとしています。MootoolsとLazyload

私はDavid Walsh's lazyload classを見つけましたが、Webkitブラウザでは機能しません(これはWebKit bug #6656のためです)。

は、私はまた、 this classを発見し、それ が動作しているように見えますが、実際にはしません。それでもページ上のすべての画像がロードされますが、ビューポートの外に画像が隠され、ビューにスクロールされるとフェードインします。

そこは本当によく働くjQueryのlazyloadクラス(内のすべてのブラウザ)の数のように見えるが、私はこのサイトの開発にすでに数週間だと、本当にこのために、スイッチングまたは2を使用して正当化することはできませんライブラリ。

Webkitブラウザで動作するMootools lazyloadクラスが存在するかどうかは誰でも知っていますか?そうでない場合、推奨事項はありますか? Mootoolsと一緒にjQueryを使用する必要がありますか?

この問題は、開発を少ししっかり保っています。

+0

Lazyloadが原因で上記のバグのためのWebkitを使用してブラウザでは動作しません。私が間違っていることを証明して、実際にバグを回避するjQueryプラグインを表示してください - 回避策を作成したかどうかは本当に不思議です。 –

+1

また、あなたが作業しているサイトがJS重いと言っているのですが、私はそれが正常にJSモードに劣化してはならないと思います。その場合は、(X)HTML5の 'data- *'属性を使用することをお勧めします。基本的に ''を作成し、このカスタム属性から 'src'ではなくファイルを遅延ロードします。 –

+0

私は自分の回避策/ハックを検討しています。ここではデフォルトでblank.gifを読み込んで実際の画像をrel = ""属性に格納しています。 –

答えて

2

noscriptタグ内に画像をラップすることができます。 Javascriptを有効にしている場合、ブラウザはそこに画像を読み込まない。それについての良い点は、JS以外のブラウザでは低下することです。私はここで詳細に説明します

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

+0

ああ、面白い!先端に感謝します。非常に便利。 –