10 jQueryプリロード画像プラグイン

この投稿では、ウェブサイトで優雅にプリロードするための優れたjQueryプラグインを紹介しています。 飛び込みましょう！

関連記事：

• jQuery外部画像のプリロード
• jQuery Preload CSS画像
• 10 jQuery画像キャッシュプラグインとスクリプト

更新21/06/2013：PreloAdjs、ImageLoader、PXLoader、UXResponsiveWebApploaderを追加しました。 🎜> preloadjs

アセットの負荷を管理および調整するためのJavaScriptライブラリ

source

|

demo

imageLoader 画像をプリロードするために設計されたjQueryプラグイン。

source

|

demo

pxloader html5アプリケーション用に合わせたJavaScript Preloader。

source

|

demo

uxesponsivewebapploader jQueryとcss3をレバレッジするレスポンシブWebアプリのようなプリロダー。

source

|

demo

そして今、オリジナルのトップ10！

---

1。 jQueryイメージローダープラグイン

画像の読み込みを簡素化し、すべての含まれる画像をロードするためにラッパーに簡単に適用されます。 UI強化の補助。

source

|

demo

2。 queryloader2 簡単な画像プリロード。

source

|

demo

3。 Smart Preloader 必要なすべての画像をプリロードするためのコンパクトなjQueryプラグイン。

source | demo

4。 jQueryプリロードプラグイン

source

|

demo

5。 jQueryサイクルプラグイン

さまざまな移行エフェクトを備えたスライドショープラグイン、ホバーの一時停止、自動ストップなどをサポートします。

source

|

demo

6。怠zyなロード画像jQueryプラグイン 長いページで画像の読み込みを遅らせ、画像をロードすると、スクロールされたときにのみ画像が表示されます（プリロードの反対）。

source |

demo

7。 jpreloader スプラッシュ画面を備えたカスタマイズ可能なプリロード画面を作成します

source | demo

8。 JavaScriptとHTML5 Progress Bar Image Loader ページの読み込み時間を示す進行状況バーを表示します

source

| demo

9。 jQuery Image Cacheプラグイン

ブラウザのローカルストレージの画像をキャッシュします。 source

|

demo

よくある質問（FAQ）プラグインを使用して画像をプリロードする目的は何ですか？ プラグインを使用して画像をプリロードすると、ウェブサイトのユーザーエクスペリエンスが向上します。 プリロードされた画像は、より速く表示され、ページの読み込み時間を短縮し、スムーズな閲覧体験を作成します。これは、画像が多いサイトに特に有益です

画像のプリロードはどのように機能しますか？

画像プリロードは、JavaScriptまたはjQueryプラグインを使用して、事前に画像をブラウザのキャッシュにロードします。 ユーザーがページにアクセスすると、ブラウザはキャッシュからそれらを取得し、ロードを高速化します。

画像プリロードにjQueryを使用することの利点は何ですか？

jQueryは画像のプリロードを簡素化し、コードをクリーンにし、読みやすくします。 画像が終了したときのコールバック関数などの機能を提供します。

純粋なJavaScriptで画像をプリロードするにはどうすればよいですか？

純粋なJavaScript Preloadingには、オブジェクトを作成し、

属性を画像URLに設定することが含まれます。これにより、ブラウザがトリガーして画像をダウンロードしてキャッシュします。 例：

Image CSSを使用して画像をプリロードできますか？src

はい、

var img1 = new Image();
img1.src = "image1.jpg";
var img2 = new Image();
img2.src = "image2.jpg";

プロパティを使用します。ただし、これには、コールバック関数など、JavaScriptやjQueryの柔軟性がありません。

画像をプリロードするための欠点はありますか？

プリロードは、初期の負荷時間と帯域幅の使用量を増やすことができます。background-image

プリロードされた画像が正しく表示されるようにするにはどうすればよいですか？

CSSまたはHTMLで正しい画像寸法を指定して、ページリフローとちらつきを防ぎます。

スライドショーまたはギャラリーの画像をプリロードできますか？

はい、プリロードは、シームレスな移行のためのスライドショーやギャラリーにとって非常に有益です。

プリロードと怠zyなロード画像の違いは何ですか？

プリロードのロードは画像を事前にロードします。怠zyなロードは、それらが目に見えようとしているときにのみそれらをロードします。

レスポンシブWebデザインに画像プリロードを使用できますか？

はい。ただし、無駄な帯域幅を避けるために現在の画面サイズに必要なプリロード画像のみが必要です。

および

を実際のリンクに置き換えることを忘れないでください。

以上が10 jQueryプリロード画像プラグインの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。