Lazy Load と Edge の相性が良くないので遅延読込みを対象外にした

2016/01/28

Windows 10 の利用ユーザーが増え、それに比例するように Micorosoft Edge を利用するユーザーも増えてきました。当ブログのアクセス解析を見ても2%程度ではあるものの、着実に利用者が増えているのを感じています。

最新ブラウザなので基本的に画面表示には問題無いはずですが、念のため動作確認をするために Edge で当サイトを閲覧してみると、おかしなところが見つかりました。レイアウトの描画は気にならなかったのですが、本文をよく見ると文章が途中で切れている箇所が散見されます。

lazy-load-edge01

確認した記事はこちら。

静岡グルメ県内限定のハンバーグレストラン「さわやか」へ行ってきた
ハンバーグ!!!静岡住民であればお馴染みの「炭火焼きレストラン さわやか」へ行ってきました。2015年11月現在、東は御殿場IC から車で5分掛からない「御殿...

F12 キーから開発者ツールを開き、ソースを見る限りは問題ありません。Firefox や Opera で閲覧しても問題ないので、おそらく Edge の処理の問題かと思われます。きちんと描画できるように試行錯誤をしてみると、どうやら画像の遅延読込みをしている処理が不具合を発生させる起因になっていることが分かりました。

画像遅延読込みプラグイン Lazy Load

当サイトでは PC からの表示に限り、画像イメージを非同期で読み込むように WordPress のプラグインである Lazy Load を仕掛けています。詳しくはこちらを御覧ください。

WordPress でスクロールによる画像遅延読み込みするプラグイン Lazy Load
WordPress のプラグインを利用すると、画面描画時点で見えない画像は読み込まず、画面をスクロールし画像を表示するタイミングに達する直前に非同期で読み込むことがで...

同プラグインを無効化すると、Edge 上での表示も正しく行われるようになりました。しかし Lazy Load を外すことは避けたいので、上記記事でユーザーエージェントから Googlebot を対象外とした方法にならって、Edge からアクセスがあった場合に対象から外すようにプラグインに手を加えることにしました。

Lazy Load で Edge を対象外にする方法

WordPress のインストール済みプラグインの一覧から Lazy Load の [編集] を選択し、ソースコードを表示します。最初に lazy-load.php のファイルのコードが表示されているので、50行目のコードを次のように書き換えます。

変更前

// Don't lazyload for feeds, previews, mobile
if( is_feed() || is_preview() )
	return $content;

変更後

// Don't lazyload for feeds, previews, mobile
if( is_feed() || is_preview() || stripos($_SERVER['HTTP_USER_AGENT'], 'Edge') )
	return $content;

これで完了です。

僕はこの他にスマホからのアクセス、Googlebot からのアクセスを対象外としているため、ソースコードは次のようになっています。

// Don't lazyload for feeds, previews, mobile
if( is_feed() || is_preview()  || wp_is_mobile()
  || stripos($_SERVER['HTTP_USER_AGENT'], 'Googlebot')
  || stripos($_SERVER['HTTP_USER_AGENT'], 'Edge') )
	return $content;

非同期処理を組み込んでいる方は、まず Edge での確認を

他のプラグインや処理を比較したわけではないので一概に断言はできませんが、Edge と非同期読込みの相性があまり良くないのではないかと感じています。古い IE も 2016年1月12日でサポートが切れ、いよいよモダンブラウザだらけになろうとしているのに、最新の Edge がこの状況では先が思い遣られます。

たまたまこの Lazy Load の処理だけ不具合が生じるのかもしれませんが、サイトに非同期処理を組み込んでいる方は一度 Edge でも確認をしてみることをおすすめします。

2017/01/22

個人事業主の開業届と青色申告の申請書を税務署へ提出!持ち物はマイナンバーカードを忘れずに!

2017/01/21

Chrome に表示された「保護された通信」「保護されない通信」とは?保護されないのは危険なのか?

2017/01/21

Word ファイルから画質を落とさず画像を取り出す方法

2017/01/20

Windows 10 でアプリをアンインストール(削除)する方法

2017/01/20

Windows 10 でデスクトップにマイコンピューターやコントロールパネルを表示する方法

2017/01/20

ファイアーエムブレムヒーローズのダウンロード方法とインストール手順【初期設定】

2017/01/17

青色申告の申請書「所得税の青色申告承認申請書」の書き方!例にならって入力すれば簡単に作成できる

2017/01/16

個人事業の開業届の書き方!例にならって入力すれば簡単に作成できる

2017/01/14

Nintendo Switch のコントローラーの充電方法は?標準の Joy-Con グリップでは充電できないので注意!

2017/01/14

Nintendo Switch の本体容量は 32GB しかない!容量追加はマイクロSDカードを利用する

→もっと見る

Name :
気力/体力勝負なシステム業界で揉まれています。自分が自分らしくあるために、大事なリセット、スタートします。

プロフィール詳細 Twitter @_NJ69_
Facebook ページ nj-clucker.com シェア
このブログが役に立ったら
「いいね!」お願いします
PAGE TOP ↑