遅延ロード導入時のページ内リンクのズレをなんとかしたい

WEB制作

投稿日:2018-11-30 更新日:

気付けば12月、今年も終わりが近づいてますね。平成最後だったりと色々と感慨深いものがあるのと1月生まれということもあって毎年この時期はセンチメンタルな気分になってしまいます。

前回に続けて制作系の記事ですが、サイトの軽量化(高速化)のために遅延読込を入れることにしたのですが、SEO的には良くないと言われてたりもしましたがスピードインデックスが導入された今となっては早いのは正義ということで導入決定!

有名どころのプラグインだとLazyLoadあたりでしょうが、jQuery依存のプラグインということもあるので今回は別のを利用することにしました。

ということでまずは軽さには定評のあるecho.jsをサクッと実装。

CDNがちょうど良さそうなの見当たらなかったのでGithubからダウンロード、またはパッケージをインストールしましょう。

https://github.com/toddmotto/echo

ダウンロード完了したらhead内でecho.jsを読み込んで、遅延読込させたい画像を以下のように記述します。









src部分には読込完了するまでのダミー用画像が設定できます。ローディングアニメーションなどを用意している場合は設定した方が良いのですが、あまり読み込み中を主張せずに自然な形にしたかったので1px四方の正方形画像を設定してあります。

ちなみにbase64でエンコードした1pxの画像をdreamweaverのスニペットや変換の単語登録しておくと便利です。

1pxの透過画像

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">

1pxの黒い画像

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=">

この辺りは状況によって使い分けましょう。

これで遅延ロード自体は問題なく実装できたんですが、PageSpeed Insightsだと「オフスクリーン画像の遅延読み込み」の項目は改善されず。

あれこれオプションを調整したものの変わらないためハマるのも時間がもったいないためライブラリを変更。

遅延読込ならlayzr.jsが使い勝手が良さげ

こちらもecho.jsと同様にjQueryに依存しないプラグインで見つけたのが「layzr.js」。echo.jsから記述を変更します。

CDNがあったので本体はCDNから読み込みます。









ほぼ、echo.jsと一緒ですね。

遅延ロードさせたい画像に関してはdata-echoからdata-layzrに置換したのみ、実行用のスクリプトも変数名が変わったのみです。

layzr.jsでの遅延ロード実装後、先ほどと同様にPageSpeed Insightsで計測してみたところ「オフスクリーン画像の遅延読み込み」は改善されていました。

そしていよいよ本題です。

アンカーリンクでページ内を移動すると位置がずれる

正直、仕様といっても差し支えのないくらいに遅延ロードとページ内移動(スムーススクロールなど)との相性は悪いです。

スクロールが特定の範囲に入ったら読込を実行するため、スクロールしていない場合には0pxになります。その状態でページ内を遷移しても高さはゼロなので確実にずれます。

ってことで高さがないなら指定してあげれば良いじゃないということで

js側でCSSを設定


const imgs = document.querySelectorAll('body img'),
     sSize = window.parent.screen.width;
imgs.forEach(function (ele) {
  const imgHeight = ele.getAttribute('height'),
        imgWidth = ele.getAttribute('width');
  ele.setAttribute('style','max-height:' + imgHeight * (sSize/imgWidth) +'px; height:initial;');
});

これで、imgにwidthとheightの指定をしてある前提にはなってしまいますが、これである程度のズレは抑えられると思います。

スマホを想定した処理なので画面サイズの取得の処理、実寸が750サイズの画像、画面の横幅が375だった場合計算式は以下のようになります。

画像の高さ × (375/750)

つまり0.5をかけて実際の高さの半分にしますよという感じですね。

正直ガッバガバな処理なので、画像のサイズを変更してしまうと使えなかったりと解決まではいたりませんが何も処理を入れなければそもそもが高さはゼロなのでそれよりはマシということで応急処置としてはアリな気がしてます。

レスポンシブサイトの場合はリサイズ時にも同様の処理が必要

上記記述に、addEventListenerなどでリサイズ時の処理も必要でした。jQueryであれば読込時やリサイズ時などまとめての記述が可能ですが、addEventListenerの場合は複数のイベントタイプの設定は不可のため面倒ですが二回処理をする必要があります。

このあたりは素のJavaScriptのちょっと面倒なところですね。

もっと良い方法を思いついたら追記・編集します!

画像単位でのサイズ決め打ちでよければcalcを利用してという手もあるのですが、それもサイズ変わったりするとずれるため汎用性にはかけるためこれというのは見つからずにいます。

ダブルレクタングルからレスポンシブへ




ダブルレクタングルからレスポンシブへ




-WEB制作
-, ,

執筆者:

関連記事

WordPressのプロフィールの取得とカスタマイズ方法

ループ内での取得かループ外での取得かの用途で記述方法は変わりますが、ループ外の場合はIDの取得が基本となります。 目次 -この記事に書かれている内容- [非表示表示]1. ユーザーIDの取得方法1.1 …

【PHP】foreachを指定回数で抜ける方法。ループ処理のパフォーマンス比較も

TwitterのAPIを使おうと思い組み込んでみたものの全件取得はうっとうしすぎるので取得数を制限することに。 基本的な事ですがしょっちゅう忘れるので備忘録。 $twObj = new Twitter …

Google オプティマイズを利用した各種テストの設定方法!無料のABテストを行って最適なコンテンツを目指そう。

WordPressをアップデートしたらダッシュボードにエディターが新しくなるよ的な文章が表示されていました。 新しもの好きとしてはさっそく使用感を試してみようとインストールしてこの文章を執筆しているの …

Googleアナリティクスのapiを使ってWordPressのPVなどのアクセスデータを取得しよう

よく記事のPVやアクセス数順にランキング形式でサイドバーなどに表示させているブログやウェブサイトをご覧になったことがあるかと思います。 正直な話、JetPack辺りのプラグインを使えば実装も容易なので …

ニックネーム
DeLux
プロフィール

30代の東京生活に疲れたWEBエンジニア。
好きなことで生きて行きたいがためにあれこれと手を出してます。
主にAdobe、Google、Apple、SONY辺りの記事とコーディングやプログラム、たまに動画編集やデザインなどのTips的な記事を更新してます。

ガジェットも大好きなのでその辺りもぼちぼち増やす予定。