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 でも確認をしてみることをおすすめします。

このブログの運営者

気力・体力勝負なシステム業界のエンジニアを経て、個人事業主として独立。Web サイト運営、動画制作など活動の場を広げています。目指すところへの道のりは険しいですが、自分が自分らしくあるために、一歩ずつ進んでいきます!

このブログでは、困ってたどり着いた人に、分かりやすく答えを提供できるように心掛けています。更新情報は、Twitter や Facebook ページを参照ください。よろしければフォローお待ちしています。

Facebook ページ NJ-CLUCKER
このブログが役に立ったら
「いいね!」お願いします

最近のエントリー

Switch の画面がオレンジになって動かなくなった場合の対処法の1つ!セーブデータを保持したまま本体を初期化する!

プラグインを使わず WordPress の投稿ページで PHP の外部ファイルを呼び出す方法

Feedly ボタンが機能していない?!正しい URL の情報に変更する方法

Twitter で過去のツイートを閲覧・削除する方法

赤ちゃんが泣き止む動画「ふかふかかふかのうた」は生後3ヶ月の赤ちゃんにも効果抜群だった!

これで迷わない!東京ディズニーランドの喫煙所マップ一覧【写真付き】

iTunes でアートワークが反映されないのは WAV 形式が原因!AAC に変換すれば反映される!

【徹底比較】WiMAX 2+ ギガ放題プランの最安値はどこ?【2017年10月版】

おすすめのモバイルルーター・ポケット WiFi を比較!選ぶポイントは利用目的に合わせること!

公共料金の支払いはクレジットカードと口座振替のどっちがお得?