今日になりFirefoxでアップデートが掛かり、再起動後 Lazy load が掛かっていることに気が付いた。

Lazy load でhtmlが崩れる

無駄な通信を減らす意味では大いに賛成だが、まとめサイトなど飛ばし読みするときに画像が遅れて出てくる。そして画像に押し出される形で読んでいる位置がどんどん下がっていく。

単純に loading=”lazy” 追加するだけでなく、width Height も指定しておいてほしい。

とにかく読みづらいので、lazy load をキャンセルさせてもらう。

サイトごとにlazy loadをブロック

要点だけを示すと、imgタグの属性 loading =lazy をeagerに変えてしまえばよい。

window.addEventListener(‘scroll’, function(e) {
console.log(“startup”);
var imgObj = Object.values(Array.from(document.body.querySelectorAll(‘img’)).reduce(function(pre, curr) {
if (!pre[curr.src]) pre[curr.src] = curr;
return pre;
}, {}));
for (var i = 0, len = imgObj.length; i < len; ++i) {
imgObj[i].setAttribute(“loading”, “eger”);
}
}, false);

イベントリスナは本来scrollではなくDOMContentLoadedが正しい。但し、うまく動作しないサイトが多かったため、scrollを採用した。

お陰で割込みが起こりまくるのでサイトのパフォーマンスが下がる可能性がある。

tampermonkey用のスクリプトを下記に記す

// ==UserScript==
// @name         RemoveLoadingLazy
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Remove lazy of loading attribute of <img> tag
// @author       You
// @match        https://*/*
// @match        http://*/*
// @grant        none
// ==/UserScript==

(function() {
  'use strict';

  window.addEventListener('scroll', function(e) {
    console.log("startup");
    var imgObj = Object.values(Array.from(document.body.querySelectorAll('img')).reduce(function(pre, curr) {
      if (!pre[curr.src]) pre[curr.src] = curr;
      return pre;
    }, {}));
    for (var i = 0, len = imgObj.length; i < len; ++i) {
      imgObj[i].setAttribute("loading", "eager");
    }
  }, false);


})();

このスクリプトはとりあえず全てのサイトに適応されている。パフォーマンスの低下するなら、tqmpermonkeyのアイコンをクリックして除外を設定してほしい。

続きを読む “Firefox75でlazy loading support” →