ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript 画像遅延読み込みライブラリ Echo.js_javascript のヒント

JavaScript 画像遅延読み込みライブラリ Echo.js_javascript のヒント

WBOY
WBOYオリジナル
2016-05-16 15:06:351861ブラウズ

Echo は、高速でサイズが小さく (1k 未満)、HTML5 データ属性を使用する独立した JavaScript 遅延画像読み込みツールです。 Echo は IE8+ をサポートします。

プラグインの説明: Lazy Load と同様、Echo.js も画像の遅延読み込み用の JavaScript です。違いは、Lazy Load が jQuery ベースのプラグインであるのに対し、Echo.js は jQuery や他の JavaScript ライブラリに依存せず、独立して使用できることです。また、Echo.js は非常に小さく、圧縮後は 1KB 未満です。

互換性

Echo.js は HTML5 の date 属性を使用しており、この属性の値を取得する必要があるため、IE6 および IE7 とは互換性がありません。 Lazy Load も HTML5 の date 属性を使用しますが、値を取得する方法が異なります。

使い方

1. ファイルをインポートします

コードをコピーします コードは次のとおりです:

882b2c8fd842c1093b7cbe04029e977d2cacc6d41bbb37262a98f745aa00fbf0

2.HTML

コードをコピーします コードは次のとおりです:

3b07d364e6c3d8e47cb51f97b541aee4
blank.gif は、デフォルトの画像として使用される 1 x 1 の画像であり、data-echo の属性値は画像の実際のアドレスです。また、画像の幅と高さを設定するか、CSS で設定するのが最善です。そうしないと、一番下にあると思われる画像の読み込みが遅くなります。

3. JavaScript

Echo.init({
offset: 0,
throttle: 0
}); 
パラメータ


テーブル> 上記の内容は JavaScript 画像遅延読み込みライブラリ Echo.js に関するものです。皆様のお役に立てれば幸いです。

パラメータ

説明

参数

说明

offset 离可视区域多少像素的图片可以被加载
throttle 图片延迟多少毫秒加载

オフセット 表示領域から何ピクセル離れたところで画像を読み込むことができます

スロットル 画像の読み込みの遅延は何ミリ秒ですか
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。