it-swarm-ja.tech

画像がブラウザの表示セクションに入るときに画像をロードしますか?

私はウェブをブラウジングしていて、今まで見たことのないものを見ました。このサイトで: http://blogof.francescomugnai.com/2009/04/mega-roundup-of-geektool-scripts-inspiration-gallery/

ページを下に移動すると、画像はブラウザの表示部分にある場合にのみ読み込まれます。私はこれまでこれを見たことがなく、他の誰かが持っているかどうか、そしてどのように正確にそれを行うのか疑問に思っていました。

これはある種のWordpressプラグイン(彼が使用しているものです))だと思いますが、よくわかりません。JavaScriptですか?実際にはページの読み込み時に読み込まれますが、後で表示されるようになります。 「おしゃれな」効果ですか、それともこれは実際にページの読み込み時間を短縮するのに役立ちますか?

29
James P. Wright

ウェブサイトによると、LazyLoadは利用できなくなりました。どうやら、コードは新しいブラウザでは機能しなくなり、作成者はコードを更新する時間がありません。

「appear」プラグインは私にとってうまく機能しています。

http://plugins.jquery.com/appear/

これにより、要素のコールバック関数を指定できます。コールバック関数は、要素が表示されたときに呼び出されます。サイトから:

$('#foo').appear(function() {
  $(this).text('Hello world');
});
12
Sanjay

「wp-content/plugins/jquery-image-lazy-loading」

レイジーローダーは、JavaScriptで記述されたjQueryプラグインです。 (長い)Webページへの画像の読み込みを遅らせます。ビューポートの外側(Webページの表示部分)の画像は、ユーザーがスクロールする前に読み込まれません。これは、画像のプリロードの反対です。

多くの大きな画像を含む長いウェブページで遅延読み込みを使用すると、ページの読み込みが速くなります。表示されている画像を読み込んだ後、ブラウザは準備完了状態になります。場合によっては、サーバーの負荷を軽減するのにも役立ちます。

http://www.appelsiini.net/projects/lazyload

したがって、指定されたすべての画像または要素のコンテキスト内を通過し、画像が完全に読み込まれる前にsrcをプレースホルダーgifに置き換え、元のURIを保存し、画像が「表示」されると、プレースホルダーを実際の画像に置き換えます。画像。

13
meder omuraliev

参照したページのソースを見ると、次のコードが含まれています。

jQuery(document).ready(function($){
  jQuery(".SC img").lazyload({
    effect:"fadeIn",
    placeholder: "http://blogof.francescomugnai.com/wp-content/plugins/jquery-image-lazy-loading/images/grey.gif"
  });
});

それが彼らが効果を達成している方法だと私は思う。これは、jQueryLazyLoadプラグインを使用します。これは次の場所にあります。

http://www.appelsiini.net/projects/lazyload

2
Robert Harvey

Sanjayが指摘したように、ApplesiiniのjQueryLazyLoadプラグインは機能しなくなりました。これが私が見つけた別のjQueryプラグインです。 jQuery Appearに加えてちょうど別のオプション。

http://plugins.jquery.com/project/LazyLoadOnScroll

http://ivorycity.com/blog/2011/04/19/jquery-lazy-loader-load-html-and-images-on-scroll/

1
weilin8