0

サイトに遅延ローダーを実装してみました。ここでサンドボックスを参照してください。

http://www.brencecoghill.com/projects/north-vietnam/

この作業を行うために、次のテキストがアイソトープに追加されました（必要なhtmlとヘッダーからのライブラリへのリンクとともに）：

$("img").lazyload({
    event : 'scroll',
    effect : 'fadeIn',
    appear: function(){
    }
});

これは Firefox では正常に動作するように見えますが、IE では完全に失敗します (バージョン 8 でテストしました) - 灰色のボックスが表示されるだけです。

  1. これを IE で動作するように修正するにはどうすればよいですか? (少なくともバージョン 8 以降)

  2. うまく劣化するようにlazyloaderをセットアップする方法はありますか?

参考までに、これらのリンクを使用して、これを実装する方法を見つけました: http://www.appelsiini.net/projects/lazyload

jQuery Isotope と Lazy Load の組み合わせ

http://jsbin.com/ajoded

http://jsfiddle.net/wN6tC/73/

編集:上記のコンソールに書き込もうとしていた行を削除します。私が得ている他のスクリプトエラーを修正するための他の提案はありますか?

4

1 に答える 1

1

削除したのでIEでうまく動作しますconsoleが、まだjsエラーがあります。なぜそのエラーが発生しているのかはわかりませんが、おそらくjQuery.noConflict();

いいえ:

SCRIPT5002: Function expected 
animate-bg.js, line 8 character 1

クロム：

Uncaught TypeError: object is not a function animate-bg.js:71 (anonymous function)
animate-bg.js:71

2番目の質問に答えるには..

うまく劣化するようにlazyloaderをセットアップする方法はありますか?

「非 JavaScript ブラウザーのフォールバック」の指示に従うことができます。これは基本的に、次のような画像のコードをセットアップすることです:

<img class="lazy" src="img/grey.gif" data-original="img/example.jpg"  width="640" heigh="480">
<noscript><img src="img/example.jpg" width="640" heigh="480"></noscript>

次に、非表示にする CSS を追加します。 

 .lazy { display: none; }

ページのjqueryが読み込まれると、すぐにこのようなものを呼び出して画像を再度表示します。

$("img.lazy").show().lazyload();
于 2012-10-22T15:09:36.473 に答える