[B! javascript][lazyload] donnie28064212のブックマーク

noscriptタグのサポートをGoogleは完全にやめるかも、Lazy-load画像のためであってもnoscript利用は推奨しない

[レベル: 上級] JavaScript で遅延読み込みする画像を確実に認識させる手段として <noscript> タグの使用を Google は提案していました。しかしながら、将来的に、<noscript> のサポートを Google は完全にやめるかもしれず、利用はもはや推奨しないと Google の Martin Splitt（マーティン・スプリット）氏はコメントしました。 JavaScript の SEO をテーマにしたオフィスアワーでの発言です。 Lazy-load のフォールバックとしての noscript Lazy-load で画像を遅延読み込みさせる環境で、Lazy-load を実装する JavaScript を Google が実行できず画像を認識しなかった場合に備えて <noscript> で画像の情報を提供しておくことができます。 <noscript> はスパムに乱

donnie28064212 2020/04/16

リンク

Chrome Dev Summit 2018が開催！Web制作者がチェックしておきたい、CSSとJavaScriptの最新情報 | コリス

先週、サンフランシスコで開催された「Chrome Dev Summit 2018」から、Web制作者が特に注目しておきたいハイライトを紹介します。ナビゲーションの新しい遷移方法、Squooshの開発秘話、新しいPageSpeed API、ChromeでもLazyloadをサポートなど、これからの制作に役立つものばかりです。 Highlights from Chrome Dev Summit 2018 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。ナビゲーション遷移（Navigation transitions） Squoosh -15kbのJavaScriptアプリ PageSpeedとLighthouse APIによる統一されたパフォーマンス分析 ChromeでもLazyloadをネイティブにサポートナビゲーション遷移（

donnie28064212 2018/11/20

リンク

Appleのようなスクロールに連動したエフェクトもこれなら簡単に実装できる1KBの超軽量スクリプト -ScrollOut | コリス

スクロールするとコンテンツをふわりと表示させたり、追従するように表示させたり、ビューポートに表示されてない画像をLazyLoadさせたり、そういえば今回のApple Watchでも面白いスクロールエフェクトが採用されていますね。スクロールによる変化を検出し、それに合わせてCSSのさまざまなエフェクトを簡単に与えることができる1KBの超軽量JavaScriptライブラリを紹介します。非常にシンプルなので、他のJavaScriptやCSSアニメーションのライブラリと一緒に使用することも簡単です。実装が簡単スクロールの変化を検出し、CSSのさまざまなエフェクトを簡単に与えることができます。超軽量 1KBの超軽量ライブラリ。依存は無しスクリプトは単体で動作し、他スクリプトへの依存は一切ありません。ブラウザのサポート IE11を含む、デスクトップ・スマホ用のすべてのブラウザをサポート。

donnie28064212 2018/09/27

リンク

Intersection Observer を用いた要素出現検出の最適化 | blog.jxck.io

Intro スクロールによる DOM 要素の出現などを効率よく検知するため、新しく Intersection Observer という API が追加された。この API の使い方と、本サイトへの適用について記す。要素交差(intersection)の検出ページをスクロールしていく過程で、特定の DOM が画面に出現したことをフックしたいケースがある。代表例は画像の遅延読み込みであり、初期ロードでは画像の取得を行わずスクロールしていく過程で順次取得する手法である。特に画像の多いページでは表示に必要なリソース取得のみに最適化でき、初期画面表示などでは効果が大きいとされる。これを実装するのに必要なのは、「 <img> 要素が出現しているかどうか」であるが、本質的には「画面外にあった <img> が viewport と交差したか」を取得することになる。つまり、要素出現の取得