【遅延改善】スクロールしてから画像を読み込むプラグイン javascript Twitter Facebook LINE コピー 2020.06.08 ポートフォリオのような1ページに多くの画像を利用しているサイトにアクセスすると表示速度が遅い場合があります。そうなってしまうとユーザーがイライラしてサイトから離脱してしまう可能性がとても高くなります。 これを改善する為のプラグインが「jquery.lazyload.js」です。 目次 jquery.lazyload.jsの設定方法プラグインのインストールファイルにソースコードを追加するまとめ jquery.lazyload.jsの設定方法 プラグインのインストール まず最初にプラグインのインストールです。インストールは以下からできます。 Lazy Load | jQuery Plugin Registry ファイルにソースコードを追加する プラグインを動かすため以下をファイルに追加してください。①JSHTMLよりも下に記述してください。 <script src="jquery.min.js"></script> <script src="jquery.lazyload.min.js"></script> <script> $(function() { $('img.lazy').lazyload(); }); </script> ②HTMLdata-originalとclassにlazyを追加してください。 <img data-original="addImage.png" class="lazy" > これで設定は完了です。ちなみにこのプラグインを使用している有名なサイトで「ラクマ」があるので参考に動きをみてください。 の通販 87,200,000点以上 | フリマアプリ ラクマの人気アイテムが87,200,000点以上!新着商品は「dazzy storeのキャバドレス ワンピース Sサイズ」「NIKEのNIKE sb シャツ G-SHOCK guess APE AVIREX」「ベビービーズ 2点」などがあります。の商品がいつでもお得な価格で購入できます。 まとめ サイトの表示速度が遅いとサイトの評価が下がります。設定するのはとても簡単なので是非今回のプラグインを利用してみてください。