Illust & Music 月の高いところ

今日のプリン言

謎のプリン語る。
一人書く人増えました。

【jQuery】画像読み込み遅延プラグイン

2018年07月18日

みやびプリン 140 87

500 320

【jQuery】画像読み込み遅延プラグイン - サムネイル

なんか、npmがやたらまずいことになってるっぽい。
詳しくは、npm, Inc. Status - Compromised version of eslint-scope published
どうやら、不正なパッケージが公開されて、情報が盗まれそうになったらしいので、
ユーザートークンを全て無効にした、みたいな感じ。
おかげで、自作パッケージをアップできないという。
困ったもんや。

さて、前置きはこのくらいにして・・・。(というかnpmで公開しようとしたら、だめだったんでさ)

画像読み込み遅延プラグインを作ってみました!

置き場所はここ
(zipファイルがダウンロードされるはず)

今回作った経緯としては、画像がやたら多いページで、読み込み速度が遅いので、なんとかならないかということで、
スクロールで見えてる範囲の分だけ画像を読み込む、としてほしいとの要望に応えるためだ。

プラグインとして有名なのが、Lazy Loadだが、
こいつがどうもうまく動かなくて、しゃーなく、自作することにしたってわけ・・・ 汗

使い方は、jQueryでやる。

<body>
<ul id="sampleImages">
  <li><img src="images/sample001.jpg"></li>
  <li><img src="images/sample002.jpg"></li>
  <li><img src="images/sample003.jpg"></li>
  <li><img src="images/sample004.jpg"></li>
  <li><img src="images/sample005.jpg"></li>
  <li><img src="images/sample006.jpg"></li>
  <li><img src="images/sample007.jpg"></li>
  <li><img src="images/sample008.jpg"></li>
  <li><img src="images/sample009.jpg"></li>
  <li><img src="images/sample010.jpg"></li>
  <li><img src="images/sample011.jpg"></li>
  <li><img src="images/sample012.jpg"></li>
  <li><img src="images/sample013.jpg"></li>
  <li><img src="images/sample014.jpg"></li>
  <li><img src="images/sample015.jpg"></li>
</ul>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src=" 本エントリーのJSを格納した場所 /jquery.simagesloading.js"></script>
<script>
$(function(){

//遅延表示させたいブロックのセレクタに、simpleImagesLoadingを適用
$('#sampleImages > li > img').simpleImagesLoading({
  fade: true,
  time: 800
});

});
</script>
</body>

画像のセレクタに、今回のプラグインを適用するだけ。
ちなみに、セレクタは画像でなくても大丈夫。
(その要素の中の画像要素を探すようになっている)

手軽にホームページを作成【おちゃのこさいさい】 - メイン

仕組みとしては、いったん画像のsrcを消して、強制的に読み込みをストップさせたのち、
スクロールの範囲に来たら画像を読み込む的な感じ。
軽い画像だとあまり効果がないが、重い画像を、多数表示しているページなんかでは有効だ。

オプションに関しては二つしかない。

オプション名 説明 値の形式 初期値
fade 表示させる時にアニメーション
させるかどうか
true / false
(真偽値)
true
time アニメーション時の時間 数値 700

もっとオプション必要かもね。

また、第二〜第四引数に無名関数を入れることによって各コールバックを実行できる。

$(function(){

//遅延表示させたいブロックのセレクタに、simpleImagesLoadingを適用
$('#sampleImages > li > img').simpleImagesLoading({
  fade: true,
  time: 800
}, function(img, dataFlg){
  // 画像読み込み開始時に実行
  // imgには画像単体、dataFlgには、ネイティブ変数、datasetが使えるかどうかが入っている
}, function(img, flg, dataFlg){
  // 画像読み込み完了時に実行(エラーが出た場合も実行される)
  // imgには画像単体、flgには画像の読み込みが成功したか、dataFlgにはネイティブ変数、datasetが使えるかどうかが入っている
}, function(img, dataFlg){
  // 画像の最終的に適用するSRCを加工したい時に入れる。
  // 必ず、return Stringを実行すること。
  return dataFlg ? img.dataset.srcdata : img.getAttribute('data-srcdata');
});

});

我ながらなかなかいい感じのプラグインになりました。
これのいいところは、レイアウトが崩れないことだ。
(画像の親に対して、style属性のheightの指定がない限り、画像の縦幅を一時的にいれている)
けっこう、他のプラグインだとレイアウト崩れたりするらしいしね。

どんどん使ってください。

というか、npm復活早ぅ

基本プレイ無料!10年以上続く王道横スクロールRPG【メイプルストーリー】 - メイン

トラックバック(0)

トラックバックURL:

コメントする