1

私たちのサイトには、多くの画像が表示されているページがほとんどありません。遅いインターネットページの読み込みでは、画像とともに完全に読み込むのに時間がかかります。ユーザーがページを下にスクロールするとオンデマンドで画像をダウンロードするjqueryソリューションをGoogleで検索します。lazyloadという jquery ライブラリを見つけました。URLはhttp://www.appelsiini.net/projects/lazyloadです。

このプラグインは優れていますが、私のページのコンテンツとデータベースから取り込まれた画像が含まれています。データベース コンテンツは、html エディターから挿入されます。私はレイジーロードを読んで、それを見つけました

1)<img class="lazy" src="img/grey.gif" data-original="img/example.jpg" >

画像 src には異なる画像があり、実際の画像パスは data-original プロパティに書き込まれますが、これは私のページのコンテンツは html エディターによって開発されていると言ったため、私のページでは不可能です。そのため、ライブラリをカスタマイズする方法について助けが必要です。その結果、イメージ タグは通常のイメージ タグのようになります<img class="lazy" src="img/example.jpg" >が、それでも機能します。このライブラリでそれができない場合は、ブラウザのビューポートにある画像のみをダウンロードする他のライブラリを提案してください。私の画像タグはそうなるだろうと言おうとしています<img class="lazy" src="img/example.jpg" >が、ライブラリはブラウザのビューポートにある画像のみをダウンロードします。助けてください。または、ユーザーが下にスクロールすると、いくつかの画像がダウンロードされ、残りがダウンロードされるサンプルコードを教えてください。ありがとう。

4

1 に答える 1

3

電話をかける前に

$("img.lazy").lazyload();

データベース コンテンツのすべての画像に、lazy クラスと data-original 属性を追加します。例: id "content" の div にデータベース コンテンツがあります。

$("#content img").each(function() {
    $(this).addClass('lazy');
    $(this).attr('data-original', $(this).attr('src'));
});

それが役立つことを願っています。

于 2012-06-13T13:51:19.927 に答える