Image Lazy Load: 画像の読み込みを遅延させるオープンソースプラグイン (jQuery)-jsチュートリアル-php.cn

Image Lazy Load: 画像の読み込みを遅延させるオープンソースプラグイン (jQuery)

伊谢尔伦

リリース： 2016-11-29 09:17:37

オリジナル

1202 人が閲覧しました

画像の遅延読み込みテクノロジーは、トラフィックの多い Web サイトにとって非常に実用的です。現在、画像は Web サイトで広く使用されており、処理されないとサーバーと帯域幅に大きな負荷がかかります。現在のユーザーに表示される領域の画像のみをレンダリングすることで、Web サイトのリクエストの数を大幅に減らすことができます。ネットワーク帯域幅リソースを削減できます。

発表

これは非常に軽量なオンチップ画像読み込みコンポーネントです

最新のブラウザとIE7+をサポートしており、Githubにはほぼ3Kのスター（フォロー）があります

使用

通常の画像

<img src="bg.png" data-src="img1.jpg" />

ログイン後にコピー

サポートRetina（網膜スクリーン） ) デバイス

<img src="bg.png" data-src="img2.jpg" data-src-retina="img2-retina.jpg" />

ログイン後にコピー

アプリケーション

$(document).ready(function() {
  $("img").unveil();
});

ログイン後にコピー

コールバックをサポート

$("img").unveil(200, function() {
  $(this).load(function() {
    this.style.opacity = 1;
  });
});

ログイン後にコピー

手動トリガーをサポート

$("img").trigger("unveil");

ログイン後にコピー

jquery_lazyload

大規模な Web サイトの画像の読み込みを遅らせ、その領域までスクロールするときにレンダリングできます。 Github には 4K のフォロワーがいます。

使用

参考 jQuery、lazyload.js

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>

ログイン後にコピー

遅延読み込みが必要な画像

<img class="lazy" data-original="img/example.jpg" width="640" height="480">

ログイン後にコピー

適用

$(function() {
    $("img.lazy").lazyload();
});

ログイン後にコピー

echo

独立したロゴ型JavaScript画像遅延読み込みライブラリ。 jQuery には依存せず、圧縮後のサイズは 2K のみです。

IE8+

をサポート

<body>
  <img src="img/blank.gif" alt="Photo" data-echo="img/photo.jpg">
  <script src="dist/echo.js"></script>
  <script>
  echo.init({
    offset: 100,
    throttle: 250,
    unload: false,
    callback: function (element, op) {
      console.log(element, &#39;has been&#39;, op + &#39;ed&#39;)
    }
  });
  // echo.render(); //手动触发调用
  </script>
</body>

ログイン後にコピー

layzr.js

を使用数日前にリリースされたばかりのImage Lazy Loadingコンポーネントで、小型、高速、依存関係がなく（jQueryに依存しない）、Retinaデバイスもサポートしています。

<script src="layzr.min.js"></script>
<img src="optional/placeholder" data-layzr="normal/image" data-layzr-retina="optional/retina/image">
<script>
var layzr = new Layzr({ 
 attr: &#39;data-layzr&#39;, 
 retinaAttr: &#39;data-layzr-retina&#39;, 
 threshold: 0, 
 callback: null 
});
</script>

ログイン後にコピー

更新しました

それでは、サーバーに HTML 内の大量の画像を data-src に変換させるにはどうすればよいでしょうか?実際、これは非常に簡単で、通常のルールを数行記述するだけで十分です。たとえば、node.js では、img の src を data-src に変換できます (F12 を直接押してブラウザのコンソールで実行できます)。りー