lazyloadの続記事を書く前につれづれ

Googleご謹製のChromeがLazyloadをデフォルト導入か？

2018年1月後半ですかね。こういった情報が出ています。
ということは、サービス単位で導入している「アメーバ」「muragon」「ナチュログ」とかそのへん。
一体なんだったわけ？と(笑)
もちろん全ブラウザが一斉導入するわけではないのですが、Chromeっつったらトップシェアブラウザですよね。
その他ブラウザが追随するのは目に見えてます。で、またブラウザ間格差(クロスブラウザ問題)が生まれる、と((((笑)

なんちゅーか、Googleの統制はどこまで続くのか。
AMPってのがあるじゃないですか。このAMP用マークアップというのは正規htmlではないんですよね。
Googleという一企業の検索システムのためだけの特別なhtml です。
でもって 検索結果に掲載されるURLも正規URLではなくGoogleのキャッシュから表示されます。
つまりGoogleが用意したキャッシュ専用の容れ物に入れてもらうためだけに書くのがAMPである、と。

AMPって実際どうなんですかね (´・ω・｀)
回線の技術とかサーバーの技術とかも同時に進んでいるわけで。回線で言えば4Gから5Gへ向けて開発が進められていて、昔のように「遅いインターネット」ではなくなるような。
いずれAMPも必要なくなるような。そういう意味で短命のような (´・ω・｀)

Chromeが独自にlazyloadを採用するってーと、これまでの例えば「スクロールしたらボヨヨンって感じで表示されるよ」とかそういうちょっとした「遊び心」なページはどうなるんだろ。謎。

ChromeのネイティブJSがなんか…おかしい…ような…

Javascriptはブラウザの実装です。
全く同じコード内容でもブラウザによってなんとなく動きが違ったりするのはそういう理由。

で、今私がおすすめしている lazysizes なんだけども、特定条件下でおかしな挙動になります。Chrome(というかChromium系ブラウザ) だけ。
なんとなくぼんやりと思っているのは クラス名変化に問題あり じゃないかなぁ… 素人考えだけど。

lazysizesは表示されるまでにクラス名が変化します。
lazyload → lazyloading → lazyloaded
このクラス名変化があるのでフェイドインなどのエフェクトが簡単につけられるようになっているわけです。
で、赤字で示した lazyloading クラスに移行するのに時間を要しているような気が。
いわゆる pending(保留) という挙動です。
delay loading系のJSというのは「スクロールして画面内に入る少し前に仕事を始める」ようになってます。
じゃないと間に合わない。画面内に完全に収まってから表示していたのでは閲覧者が画像があることに気づかず通り過ぎてしまう恐れがあります。
せっかちスクロールとかされたらアウト(笑)
なのに現バージョンのChrome64ではthreshold(スレショルド, しきい値)が設定されているにも関わらず、画面に完全に入ってさらに2〜3秒待たないと画像が表示されません。もちろん特定条件下ですが。
これでは使えない (´・ω・｀)

そこで今度はlazysizesではなく lazyload を使用してみます。
こちらは御本家ですが、バージョンUPで jQuery依存からネイティブJSに移行 しています。
なんか最近「脱jQuery」の動きも活発な気がする。

ネイティブJS(vanilla JS)
【メリット(pros)】
・バージョンに左右されることがほとんど無い
・軽量
【デメリット(cons)】
・ブラウザ実装なのでブラウザ間に若干の違いあり(特にクソMicrosoft)
・非常に難解でコードも冗長

jQuery
【メリット(pros)】
・ブラウザ間格差を吸収
・比較的理解しやすくコードも短くて済む場合が多い
【デメリット(cons)】
・バージョンに大きく左右される
・フレームワークなのでどうしても重たくなる

こんな感じですね。

lazyloadの方ですが、作者がjQueryからネイティブに切り替えた、しかも別リリースではなくバージョンUPで切り替えた。
ってことはもう jQueryに戻す気は無い と思います。
するとどうなるかというと、今後のjQueryアップデート・アップグレードに対応しない のではないかと (´・ω・｀)
ですからlazyload御本家を利用するのならば、今のうちにネイティブに切り替えた方が良いと思います。はい。

lazysizesではなくlazyloadを使用した場合のChromeでの表示ですが、lazysizesのような問題は起こりません。
lazyloadはクラス名切り替えがありませんので、それが理由… じゃないかなぁと思っているのだけれど(不安)
ということで最新lazyloadは旧来のような「簡単にフェイドイン指定」ができなくなっております。
その点もどうなんだ、と(笑)

がしかしBUT。使えそうなlazyloadですが、
Microsoftブラウザで全く使い物にならない
んですねコレ (´・ω・｀)
理由はもうわかってるんだけども、Microsoftブラウザ、つまり Edge と IE11 ではネイティブJSの this.xxx.forEach(function (xxx) { これが使えない。
マジでもう滅しろ。
で、こう書き直さないといけない Array.prototype.forEach.call(this.xxx, function {
もうホント勘弁してくれ… つか滅びろ。
ところが書き換えても思うような動作になってはくれません。だから 滅びろ。

もう疲れたよパトラッシュ… ということでね (´・ω・｀)
他にも名だたるdelay loading系JS(echoとか色々)をチェックしてみましたが、ChromeかMicroなんとかのいずれかで引っかかる。
もうやーめた ですよ。
何度も言いますが「特定条件下」です。Microなんとかの方は特定ではないが。

いや冗談抜きでMicroなんとかは もうブラウザ作るな。
「IEが」ってならまだしも現デフォルトのEdgeまでもがそんなゴミ仕様だなんてマジで頭どうかしてるだろ。
object-fitプロパティもさっさと実装しろ。いやもう何もやらんでいい。切腹しろ。

というぼやき記事でした。
お読み頂いた方、お時間無駄にしてすみません(笑)