タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
制作したサイトのページの表示速度が遅いと感じたことはありませんか？ imgタグで配置した画像は通常見えている画面内に映っていなくてもそのページにあるもは全て読み込まれてしまいます。 つまり見えてもいない画像を読み込むためページ表示速度が遅くなってしまいます。 しかしその問題は画像の遅延読み込みという技術を用いることにより解消することができます。 この記事ではそれ実装できるlazyload.jsをご紹介します！ 画像の遅延読み込みとは 遅延読み込みとは画面内に入ってきた画像のみ（タイミングは調整できます）読み込みます。 それ以外の見えていない画像は読み込み待ち状態となります。 つまり余計な画像を読まないためページの表示速度が速くなります。 デモ まずは下記のデモを御覧ください。 スクロールするを遅れて画像が読み込まれてるのが確認できるかと思います。 遅延読み込みを可能にするlazyload.
2023年3月27日リリースの Safari16.4 で、iframe 要素もデフォルトで「ネイティブLazy-Load」対応に‼️ "Lazy-Load" って何？ って思うブログ初心者の方もみえるかもしれません。 Lazy-Load（レイジーロード）とは画像の遅延読み込みを行うための技術で、 ブラウザの機能のみで行うネイティブLazy-Load と、 JSライブラリ利用版 の2種類があります。 遅延読み込みは 画像などHTML要素の読み込みに時間差を設けて表示させ 画面表示の高速化を図るしくみですが、 img・iframe 要素の読み込み時に「ネイティブLazy-Load」指定したHTMLでも Webブラウザが対応していないと「ネイティブLazy-Load」指定は無視されてしまいます。 2023/03/27リリースされた Safari16.4 以降で、ついに「ネイティブLazy-L
こんにちは。とあるフロントエンドエンジニアです。 同一ページに大量に画像を要するサイトの構築や、高解像度の画像をいくつも埋め込むサイトの場合、コーディングの際に画像の遅延読み込み、いわゆるLazyloadを実装しておくとSEO的にもUX的にも有益であることは有名です。 現在、Lazyloadの実装には様々なパターンがありますが、それぞれ裏側 （ネットワークのリクエスト面）ではどのような違いがあるのだろうと気になったので検証してみました。 検証実験 実験概要 今回は割と新しめのHTMLの属性であるloading属性を使用した実装方法とjsのIntersection Observer APIを使用した実装方法を比較してみました。 またその中でもimg要素にwidth・height属性を指定し、レイアウトシフトの抑制処理をしたケースとそうでないケースなど、いろいろ試してみました。 比較はchro
// ヘッダー情報 const header = document.querySelector(".fixed-header"); const headerHeight = header ? header.offsetHeight + 20 : 0; // ページ内のスムーススクロール for (const link of document.querySelectorAll('a[href*="#"]')) { link.addEventListener('click', (e) => { const hash = e.currentTarget.hash; const target = document.getElementById(hash.slice(1)); // ページトップへ("#"と"#top"） if (!hash || hash === '#top') { e.preve
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
