絶対にLightBoxが軽くなる方法3選

重いと言われるLightBoxですが、軽くする方法があります。

1.minバージョンを使う
これは言うまでもありませんね。

2.プロパティを指定
HTMLのほうで
<script src=”js/lightbox-plus-jquery.min.js”></script>
と書くと思うのですが、その下に
<script>
lightbox.option({
‘resizeDuration’: 10,
‘fadeDuration’: 250,
‘showImageNumberLabel’:false
})
</script>

と記載します。このプロパティは拡大表示する時の時間やフェードの時間を設定するものですが、上の数値でもかなり小さくなっており、快適に動作します。
showimageLabelをオフにしているのは私の好みですので、好きにしてください。

3.小物画像をBASE64エンコードにして埋め込む
imagesフォルダの中に、prevやnextなどの画像がありますが、これをBASE64にしてcssの中に埋め込みます。
一般的に1KB以下の小さな画像はCSSスプライトにするかBASE64エンコードによる埋め込みが推奨されています。なぜなら、1KBのためにリクエストするとリクエストにかかる時間の方が長くなるからです。
これにより、リクエストやキャッシュを呼び出す必要がなくなるので、拡大がかなり快適に動作するようになります。
詳しいやり方は割愛しますが、cssの中にある画像のファイル名をそのままBASE64になったコードに置き換えるだけです。ぐにゅぐにゅした文字の羅列で気持ち悪いと思ったり長いと思ったり、スマートではないと思ったりすると思いますが、サーバーからしてもユーザーサイドからしてもこの方がスマートです。

Lightboxを既に導入してしまったので他への乗り換えは無理という方はぜひお試しください。