※この記事は5年以上前の記事です。
現在は状況が異なる可能性がありますのでご注意ください。
なんか、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復活早ぅ
コメントする