遅延読込「Lazy Load」とCSSのbox-shadowを滑らかにアニメーションする方法の記事を書きました。

技術ブログの方に以下2つの記事を書いたのでこちらでも紹介します。
まだまだこちらのブログのほうからの流入が多いのと、技術ブログはインデックスされるまで時間が掛かるのでもう少しこちらブログでの紹介も続けようと思います。
(こちらのブログは殆ど即日インデックスしてもらえます)


超軽量コードで画像の遅延読込を組み込む方法 (542B)【jQuery不要】

“遅延読込” や “Lazy Load” という言葉を聞いたことはないでしょうか?
これは画像などの重たい要素を、表示される位置までスクロールしたタイミングで遅れて読み込む技術です。

はじめから全ての画像などを読み込まないので表示されなかった分の通信負荷が削減できるユーザにもサーバにも優しい優れものです。

多くのコードが配布されいますが、カスタムデータ属性を使っていたりして少し面倒なものが殆どです。
(全てのものを確認したわけではないので「殆ど」と言っていますが、これまで見たものは全てそうでした)

そこで、既存 HTML にポン付けで使えるようにダミー画像まで組み込んだコードを作成しました。
機能的にはスクロールされるまでは透明 GIF にしておいてスクロールされたタイミングで表示領域の画像を読み込む仕組みです。

※多くのコードがカスタムデータ属性を使うのはダミー画像を各画像ごどに指定できるようにしたりもっと高級な機能を実現する為だと思います。どちらが良い悪いという話ではなく用途の問題です。

コメントを削除したインデントありのコードでおよそ 1.1kB でショートコード化すればダミー画像を含めても 542B になります。
使う場合は既存ページに追加するだけです。超軽量で超お手軽です。

詳細は、以下記事を参考にして下さい。

CSSのbox-shadowを滑らかにtransitionさせる方法【カクカクさせない】

CSS の box-shadow をアニメーションさせる時、影がカクつくことがあります。

そこで、影を滑らかにアニメーションさせる為の小技を紹介しています。

カクカクする原因的にスマホでは殆ど分かりませんが、大画面低画素数の画面ではかなり気になることがあります。
これまで気が付かなかった方もちょっとした気遣いをするとより洗練されたデザインになると思います。

CSS が肥大化することもなく改善できますので、ぜひご検討下さい。詳細は記事を参考にして下さいね。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)