ブックマーク / hyper-text.org (2)

  • Chrome 75 に HTML 側の指定のみで動作する画像遅延読み込み (loading="lazy") が実装される

    img 要素や iframe 要素などのリソースを、HTML 側の指定のみで遅延読み込みに対応させる loading 属性を、Chrome 75 が先行実装しましたので簡単に紹介。 記事執筆時点において、loading 属性は Chrome の先行実装でしたが、その後、HTML Living Standard 仕様において定義されました。それに伴い指定可能な属性値などが変わっていますのでご注意ください。詳しくは「Firefox 75、HTML の指定のみで動作する画像遅延読み込み (loading="lazy") に正式対応」をご覧ください。 画像など、Web ページで使用するリソースの遅延読み込みは、Web ページの体感的な表示速度を向上させるために利用されますが、現時点では JavaScript を使用した実装が一般的です。 これをブラウザ側でネイティブに実装し、HTML 側の指定の

    Chrome 75 に HTML 側の指定のみで動作する画像遅延読み込み (loading="lazy") が実装される
  • ページ内リンクはスムーズスクロールしなくても一瞬点滅すればいいんじゃないかという実験

    スムーズスクロール以外の方法で、ページ内リンクによって画面が切り替わったことを利用者にわかりやすく伝える方法はないかということで、ページ内リンクでの移動時に画面を一瞬点滅させるスクリプトを jQuery で書いてみました。 タイトルが (謎) な感じですが...... ページ内リンクでページ上部に移動させたりするとき、最近は所謂スムーズスクロールってやつを実装するのが当たり前になっていますよね。パッと瞬時に画面が切り替わってしまうと、ページ内で移動したことがわかりにくいので、スクロール処理を入れることでわかりやすくしてあげましょうって言う、親切心から採用されるケースが多いと思います。 実装方法は JavaScriptCSS アニメーションの組み合わせや、JavaScript (というか jQuery) でというのが多いと思いますが、今回はそのスムーズスクロールの実装方法はどれが良いの

    ページ内リンクはスムーズスクロールしなくても一瞬点滅すればいいんじゃないかという実験
  • 1